CSS3 rounded corners - only border is rounded, inner box still square

Question

I haven't seen this question anywhere else, I hope someone can help. I have a div container with a thick border. I was hoping that when I rounded the edges, all edges would round, but only the border rounded, leaving the original box square. I don't want to use an image, I want to keep it pure CSS. Thanks in advance! :)

#dashboard {
margin: 0 auto 53px;
max-width: 100%;
background-color: white;
background-radius: 10px;
border: 30px solid black;
padding: 0px 20px 0px 20px;

border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

-moz-border-top-left-radius: 0px;
-moz-border-top-right-radius: 0px;
-moz-border-bottom-left-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}

its supposed to be that way, if your parent is rounded the inside will not be rounded unless you make it rounded http://jsfiddle.net/4tqLQ/3/ — Grigor, Jan 13 '12 at 19:37
You might want to look at [this answer](http://stackoverflow.com/a/4839726/848090). — seth.miller, Jan 13 '12 at 19:37

score 4 · Accepted Answer · answered Jan 13 '12 at 19:34

4

Use two nested divs, both rounded. Simulate border with padding on the wrap.

Here's a fiddle

answered Jan 13 '12 at 19:34

mreq

6,414
4
37
57

CSS3 rounded corners - only border is rounded, inner box still square

1 Answers1