6

I would like to style a <ul> to display all items in a box with rounded corners (see below):

enter image description here

Is it possible to use CSS and only the <ul> (with no additional <div>s and tables), as I'm going to use it in a CMS system to style all <ul>s created by the user?

5 Answers 5

2

Here's a pretty good example of rounded corners using CSS3: CSS3 Rounded corners

This will only work in Firefox and Safari though.

1

I was able to recreate your image using the following (X)HTML and CSS:

  <!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>UL Corners</title>
        <style type="text/css">
            ul {
                background-color: #EBEBEB;
                list-style-image: url(arrow.png);
                font-family: Verdana, Helvetica, sans-serif;
                font-size: 11px;
                padding: 15px;
                width: 410px;
                border-radius: 20px;
                -moz-border-radius: 20px;
                -webkit-border-radius: 20px;
            }
            li {
                margin: 10px;
                margin-left: 25px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                Functional DR (Disaster Recovery)
            </li>
            <li>
                Virtual off site contact centre management
            </li>
            <li>
                Technology, Connectivity, Process and Resource Management in disaster recovery site
            </li>
            <li>
                Mission Critical Response Service Level Agreements and Logistical management
            </li>
        </ul>
    </body>
  </html>

The end result looks like this:

screenshot http://img19.imageshack.us/img19/2194/screenshotdzn.png

But it only works in Firefox, Chrome, Safari and any browser supporting CSS3. That sadly excludes IE.

0
1

Have a look at jQuery Corner for a more rounded cornering solution ;-) It does involve JS as well as CSS, but has a lot of out-of-the-box flexibility.

0
1

If you can tag the last li, you can put the bottom corners on that - My rounded corner list.

ul {background:transparent url(rc_top.jpg) 0 0 no-repeat;width:459px;padding:20px 0 0 0;}
ul li {background-color:#ebebeb;padding-left: 40px;}
ul li.last {background:transparent url(rc_bot.jpg) 0 bottom no-repeat;padding-bottom:20px;}

<ul>
    <li>one</li>
    <li>two</li>
    <li class="last">three</li>
</ul>

If IE6 and 7 are not a concern, you can use ul li:last-child instead of ul li.last.

0

Using only the UL tag, I don't know a pure CSS 2 solution for variable height block (for fixed-height: you have the sliding doors technique).

You might want to look at a JS+CSS solution: nifty corners.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.