Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS: How to produce rounded boxed list

CSS: How to produce rounded boxed list

Problem

I would like to reproduce the following in the simplest way (probably using a

    ):

    So, I would like to be able to add as many rows as I want to this list, each row being composed of a picture, a description and a counter. The list should be in a rounded box, and the rows should be separated with lines.

    Could someone with CSS skills help me with this?

    Thanks a lot!

    Problem courtesy of: borck

    Solution

    Well, here's one way of doing it.

    HTML:

    • Item 1 1

    CSS:

    /* Container with border and rounded corners */
    ul {
        border: 1px solid #ccc;
        width: 200px;
    
        /* Border radius for Chrome, Webkit and other good browsers */
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -border-radius: 10px;
        border-radius: 10px;
    }
    
    /* Only add border to bottom of 
  • */ li { padding: 10px; border-bottom: 1px solid #ccc; } /* Get rid of the last
  • 's bottom border to stop overlap with
      's border */ /* :last-child works in IE7+ */ li:last-child { border-bottom: none; } /* Get the number and float it right */ span { float: right; } ​
  • Solution courtesy of: Bojangles

    Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    CSS: How to produce rounded boxed list

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×