Add border around ordered list elements

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>

 

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada

Author: DrRakha
Mastermind

Posts: 2715
Have thanks: 74 time

Page 1 of 1

[ 1 post ]

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 -
Removing elements from array list with the iterator -
Listing elements using list components in J2me -
Border around JPG img -
Add solid Border to div -

Topic Tags

HTML List

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com