Switch to full style
HTML code examples
Post a reply

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 {
    
padding12px 45px;
    
margin-bottom6px;
     
border-top2px solid red;
    
border-bottom1px 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>

 




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

Topic Tags

HTML List