Search code examples
cssrounded-cornersweb-frontend

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

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

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

    Here's a fiddle