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

HTML / CSS » Tags » ol 
Add border to LI tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" xml:lang="en" lang="en">
  <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.gifno-repeat 6px 50%;
  #divID #two {
    background: url(img/ol_2.gifno-repeat 2px 50%;
  #divID #three {
    background: url(img/ol_3.gifno-repeat 3px 50%;
  #divID #four {
    background: url(img/ol_4.gifno-repeat 0px 50%;
  #divID #five {
    background: url(img/ol_5.gifno-repeat 6px 50%;



<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>


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;}  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.