How to apply the border-radius prop of the children?

Question

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 a specific corner rounding on the child div's nothing happens. See the code below: My Html: ``` ``` 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…

Accepted Answer

I'm going to recommend using shorthand for `border-radius` (which, if using PIE.htc, will work in IE8 and below):

NOTE: `border-radius` shorthand is as follows: `border-radius: top-left top-right bottom-right bottom-left`

```
#sliderDiv{ 
  -webkit-border-radius: 20px 0 0 20px;
  -moz-border-radius: 20px 0 0 20px;
  border-radius: 20px 0 0 20px;
}
#slider2Div{
  -webkit-border-radius: 0 20px 20px 0;
  -moz-border-radius: 0 20px 20px 0;
  border-radius: 0 20px 20px 0;
}
#slider3Div{
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0;
}
```

Few reasons why I like to use shorthand:

- Required for PIE.htc (css3pie.com)

- The syntax for each corner is atrocious and different for each prefix (e.g. `border-top-left-radius` vs. `-moz-border-radius-topleft`).

How to apply the border-radius prop of the children?

Solution

Problem