Add border around ordered list elements

Add border around ordered list elements

Wed Feb 22, 2012 1:06 pm

In this example we use CSS properties to draw border around the order list elements .

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
  #elementStyle li {
    padding: 12px 45px;
    margin-bottom: 6px;
     border-top: 2px solid red;
    border-bottom: 1px solid gray;
  }
  
  </style>
</head>

<body>
   <p>
     In this example we are showing ordered list 
     but with border around each element 
   </p>

<div>
   Following are the list known operating systems :
  <ol id="elementStyle">
    <li>Microsoft Windows</li>
    <li>Apple Macintosh</li>
    <li>Linux</li>
    <li>Unix</li> 
  </ol>
</div>



</body>
</html>

 

_________________
Please recommend / share my post if you found it helpful.

Author: msi_333
Mastermind

Posts: 2757
Have thanks: 70 time

Page 1 of 1

[ 1 post ]

Related Posts to : Add border around ordered list elements
nested ordered list -
creating non ordered list using UL tag. -
ordered list with roman numbers -
Remove ordered list numbers -
ordered list from specific number -
unordered-ordered-Definition-list-HTML-Tags -
Removing elements from array list with the iterator -
Listing elements using list components in J2me -
Border around JPG img -
Add solid Border to div -

Codemiles.com » General Topics Forums » Code library » HTML codes » HTML examples

All times are UTC [ DST ]

Topic Tags

HTML List