Using border-radius on ul with only giving a radius to the outer li's

Posted by RJD22 on Stack Overflow See other posts from Stack Overflow or by RJD22
Published on 2010-05-24T16:24:03Z Indexed on 2010/05/24 16:41 UTC
Read the original article Hit count: 252

Filed under:
|

Maybe the answer is really simple. But what I'm trying to do it to make a curved border around the li's.

So not only the outside but also the inside:

Examples: Right

right

Wrong:

wrong

Don't mind the differences. What I'm trying to do it to curve the inner border this is the html:

<ul>
  <li>Dashboard</li>
  <li>Voertuigen</li>
  <li>Klanten</li>
  <li>Factures</li>
  <li>Boetes</li>
  <li>Onderhoud</li>
 </ul>

Css:

ul {
 list-style: none;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 width: 140px;
 border: 10px solid #BEBEBE;
}

ul li {
 height: 40px;
 width: 140px;
 background: #E5E5E5;
}

© Stack Overflow or respective owner

Related posts about html

Related posts about css