Border Radius not working
===

I have three div's in a parent wrapper. when i apply border-radius:20px; on the parent i get rounded borders. but when i apply specific corner rounding on the child div's nothing happens see below.

My Html:

    <nav id="sliderNav">
	<div id="sliderDiv">
    	    <ul id="slider">
        	        <li><img src="bookaparty.jpg" width="290" height="417" /></li>
                  <li><img src="bottledeals.jpg" width="290" height="417" /></li>
              </ul>
          </div>
          <div id="slider3Div">
    	    <ul id="slider3">
        	        <li><img src="bookaparty.jpg" width="290" height="417" /></li>
                  <li><img src="bottledeals.jpg" width="290" height="417" /></li>
              </ul>
          </div>
          <div id="slider2Div">
    	    <ul id="slider2">
        	        <li><img src="bookaparty.jpg" width="290" height="417" /></li>
                  <li><img src="bottledeals.jpg" width="290" height="417" /></li>
              </ul>
  	</div>
    </nav>


My Css:

    #sliderNav{
	display:block;
	text-align:center;
	font-size:0;
    }

    #sliderDiv{ 
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
    }
    #slider2Div{
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
    }
    #slider3Div{
	border-top-left-radius:20px;
	border-top-right-radius:20px;
    }
    #sliderNav div{
	font-size:18px;
	display:inline-block;
    }

This doesn't work, but if i change to the following i get everycorner rounded:

    #sliderNav div{
	font-size:18px;
	display:inline-block;
          border-radius:20px;
    }