Add border to LI tag : ol « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. ol

Add border to LI tag

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
  #divID #recipe {
    list-style: none;
  }
  
  #divID #recipe li {
    padding: 10px 50px;
    margin-bottom: 6px;
    border-bottom: 1px solid #ccc;
  }
  
  #divID #one {
    background: url(img/ol_1.gif) no-repeat 6px 50%;
    }
  
  #divID #two {
    background: url(img/ol_2.gif) no-repeat 2px 50%;
    }
  
  #divID #three {
    background: url(img/ol_3.gif) no-repeat 3px 50%;
    }
  
  #divID #four {
    background: url(img/ol_4.gif) no-repeat 0px 50%;
    }
  
  #divID #five {
    background: url(img/ol_5.gif) no-repeat 6px 50%;
    }

  </style>
</head>

<body>


<div id="divID">
  <ol id="recipe">
    <li id="one">this is a test. </li>
    <li id="two">this is a test. </li>
    <li id="three">this is a test. </li>
    <li id="four">this is a test. </li> 
    <li id="five">this is a test. </li>
  </ol>
</div>



</body>
</html>








Related examples in the same category

1.'ol' creates an indented numbered (ordered) list
2.'start' specifies the starting number in an ordered list
3.'type' defines the style for the list items
4.Unordered Lists
5.OL tag
6.Style for 'ol li'
7.list-style: none for OL
8.Nested OL tag
9.Three level OL list
10.ol elements without a type attribute: have a numeric sequence type (i.e., 1, 2, ...)
11.A nested ordered list
12.Example of the start Attribute
13.Example of the value Attribute
14.Ordered lists started at 5
15.Numbering options on ordered lists
16.ol { counter-reset:Item }
17.Ordered List Example
18.ol {list-style-type: lower-roman;}