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

Answer 1

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

Here’s a fiddle