Menu
I would like to style a <ul> to display all items in a box with rounded corners (see below):
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?
911
Here's a pretty good example of rounded corners using CSS3: CSS3 Rounded corners
This will only work in Firefox and Safari though.
185
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.
40
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.
33
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
