Border Radius not working

[Pendaorer]

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:\[code\]<nav id="sliderNav"><div id="sliderDiv"> <ul id="slider"> <li><img src="http://stackoverflow.com/questions/11544817/bookaparty.jpg" width="290" height="417" /></li> <li><img src="http://stackoverflow.com/questions/11544817/bottledeals.jpg" width="290" height="417" /></li> </ul> </div> <div id="slider3Div"> <ul id="slider3"> <li><img src="http://stackoverflow.com/questions/11544817/bookaparty.jpg" width="290" height="417" /></li> <li><img src="http://stackoverflow.com/questions/11544817/bottledeals.jpg" width="290" height="417" /></li> </ul> </div> <div id="slider2Div"> <ul id="slider2"> <li><img src="http://stackoverflow.com/questions/11544817/bookaparty.jpg" width="290" height="417" /></li> <li><img src="http://stackoverflow.com/questions/11544817/bottledeals.jpg" width="290" height="417" /></li> </ul></div></nav>\[/code\]My Css:\[code\]#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;}\[/code\]This doesn't work, but if i change to the following i get everycorner rounded:\[code\]#sliderNav div{font-size:18px;display:inline-block; border-radius:20px;}\[/code\]