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

Question

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

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;
}

Answer 1

This is ripped straight from my site:

<div class='header'> 
        <ul><li><a href="/qrpsdrail/">Home</a></li><li><a href="/qrpsdrail/about">About</a></li></ul> 
        <ul class="right"> 
          <li> 
            <a href="/qrpsdrail/login">Login</a> 
          </li> 
          <li> 
            <a href="/qrpsdrail/signup" class="right">Register</a> 
          </li> 
        </ul> 
</div>

The corresponding CSS:

.header ul {
    float: left;
    list-style: none;
    margin: 0 0 0 140px;
}

.header ul.right {
    float:right;
}

.header li {
    float: left;
    font-size: 14px;
    margin: 0;
    padding: 0;
    height: 25px;
}

.header a.right {
    background: url('/button.jpg') #1463A3;
    display: block;
    float: left;
    margin: 0;
    padding: 10px 10px;
    text-decoration: none;
  -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
}

Which produces:

And the only list items that get curved are ones (prespecified) along the right edge. All other li's have a square radius.

So really, the only way I've found to do it is to simply specify a class for the items you know will be along the edge, and curve those.

Hope this helps! Or at least gets you closer to the answer you're looking for :-).

Answer 2

you have to set a border radius to the top corners of the first li and to the bottom corners of the last li. one possibility to achive this is using first-child and last-child, so it would also work if the munu-items are dynamic.

Answer 3

Ok, here's the solution:

http://www.jsfiddle.net/MDXZG/1/

You set the position to relative for the lis, and give them a negative z-index, putting them behind the border.

CSS

ul {
    list-style: none;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    width: 140px;
    position:relative;
    z-index:1;
    border: 10px solid #BEBEBE;
}

ul li {
    height: 40px;
    position:relative;
    z-index:0;
    background: #E5E5E5;
}​

HTML

<ul>
    <li style="background-color: aqua;">Dashboard</li>
    <li>Voertuigen</li>
    <li>Klanten</li>
    <li>Factures</li>
    <li>Boetes</li>
    <li>Onderhoud</li>
</ul>​

Answer 4

This is what I'd do:

<ul>
  <li class="first">Dashboard</li>
  <li>Voertuigen</li>
  <li>Klanten</li>
  <li>Factures</li>
  <li>Boetes</li>
  <li class="last">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;
}

li.first {
 -webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px; 
}

li.last {
 -webkit-border-top-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 12px;
 -webkit-border-bottom-left-radius: 12px;
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 12px;
 -moz-border-radius-bottomleft: 12px;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 border-bottom-right-radius: 12px;
 border-bottom-left-radius: 12px;
}

Answer 5

Ok, a solution that does work with links: http://www.jsfiddle.net/MDXZG/6/

HTML

<div class="roundbox">
    <h3>Dashboard</h3>
    <ul>
        <li><a href="http://google.com"&gt;Voertuigen&lt;/a&gt;&lt;/li&gt;
        <li>Klanten</li>
        <li>Factures</li>
        <li>Boetes</li>
        <li>Onderhoud</li>
    </ul>
</div>

CSS

I've omitted the various border radius specifications for conciseness.

div.roundbox {
    border-radius: 15px;
    width: 120px;
    padding: 10px;
    background: #BEBEBE;
}

div.roundbox ul {
    list-style: none;
}

div.roundbox ul li {
    height: 40px;
    background: #E5E5E5;
}

div.roundbox ul li:last-child
{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.roundbox h3
{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    height: 40px;
    background-color: #00BEE5;
}

​

​