Add border around ordered list elements

msi_333 · **Posted:** 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>

 

Add border around ordered list elements

Users browsing similar codes