Rounded List

Rounded corners have been a major part of design the past few years. And rounded boxes with selectable items inside are no different. These UI elements have been made popular though mobile devices and are quickly consuming navigation areas all over the web. Here’s a look at what we are making.

First things first, we need a list. For this example we will be using a very simple list of fruits.

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
    <li>Dates</li>
</ul>

Nothing revolutionary there. Next we clean up the browser defined CSS. It’s recommended to always use some sort of CSS reset. Being a fan of Yahoo! UI, I use theirs, but there are others. I just made a quick piece here to remove the bullets, margin, and padding.

ul {
    width: 120px;
    margin: 0;
    padding: 0;
    list-style: none;
}

Next we add a border. First, we need to add the border to each <li>. The next step is to remove the top border from the all items except the first one using the sibling (+) selector.

li {
	border: 1px solid #7f7f8c;
}
li+li {
	border-top: none;
}

That feels a little cramped. Let’s open it up a little bit and give it some breathing room.

li {
	padding: 8px 12px;
}

That’s looking really good and is actually the final version for IE7 & IE8 (with regards to the hover). But for browsers that support CSS3′s border radius, they will get the CSS powered prettiness. This looks like a lot of CSS, but it CSS3 is not a full standard yet, so we have to use the browser extensions for the elements.

li:first-child {
	border-radius: 10px 10px 0 0 ;
	-moz-border-radius: 10px 10px 0 0 ;
	-webkit-border-radius: 10px 10px 0 0 ;
}
li:last-child {
	border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
}

You may be asking yourself, “Why not use images?” You are more than welcome to, but I agree with Paul over at Boag in this video he posted about the topic.

Finally we add a hover effect to the items to make them stand out when you mouse over

li:hover {
	cursor: pointer;
	background-color: #f7f7ff;
}