CSS - border radius and solid border curved inside

Question

This style give a border with smoothed corners on the outside of the border but the insides of the corners are sqaured of, can I make them rounded as well?

img{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

border:white solid 8px;
}

enter image description here Note the problem is only with images the suggestions submitted work only with a div.

You'll need to provide your HTML and full CSS statements. There's not enough to go on here. What does "insides of the corners" mean? Child elements? — isherwood, Dec 04 '13 at 17:35
possible duplicate of [How to make round corners to both inside of a box and its border?](http://stackoverflow.com/questions/4839613/how-to-make-round-corners-to-both-inside-of-a-box-and-its-border) — kei, Dec 04 '13 at 17:41
The thickness of your border was a missing piece of critical information here. — isherwood, Dec 04 '13 at 17:44

score 17 · Accepted Answer · answered Dec 04 '13 at 17:44

17

you can use border-radius values as twice the border-size value to obtain inside-rounded corners.

-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;

border:white solid 8px;

answered Dec 04 '13 at 17:44

Marc

422
3
7

score 5 · Answer 2 · answered Dec 04 '13 at 17:44

5

you have to set a border-radius-value thats higher than your border-width. take a look at this jsfiddle.

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
border:black solid 8px;

answered Dec 04 '13 at 17:44

oezi

51,017
10
98
115

Josh Davenport-Smith · Answer 3 · 2013-12-05T11:34:42.183

This technique requires that the image is wrapped in a div because — and I'm not sure why — in Safari psuedo-elements won't seem to render for img elements.

HTML

<div class="box"><img src="http://placehold.it/200x200/" /></div>

CSS

.box { 
    display:inline-block; /* Makes the wrapper flush with the image */
    line-height: 0; /* Stops a gap appearing underneath image */
}
.box, .box:before { 
    border: 8px solid #fff; 
    border-radius: 16px; 
    position: relative; 
    z-index: 1; 
}
.box:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    top: -8px; 
    left: -8px; 
    right: -8px; 
    bottom: -8px; 
    z-index: 2; 
}

The :before psuedo-element sits on top of the image with its inner curved border, essentially simulating the inner curved border on the image. It's a pretty nice workaround that achieves the curved inner border that you.

The border-width of the wrapper and image and top, left, right and bottom positions of the :before pseudo element needs to be half that of the border radius of the wrapper element.

http://jsfiddle.net/nvG5S/

Well [pseudo-elements](http://caniuse.com/#search=after) has good support and [border-radius](http://caniuse.com/#search=border-radius) also has pretty good support, so yes. Have tried in chrome, safari and firefox and works in those. Sure it works in IE too but you'll need to test. — Josh Davenport-Smith, Dec 05 '13 at 11:34

score 0 · Answer 4 · answered Dec 04 '13 at 17:44

0

If you decrease the thickness of the border will get the expected result, or increase the corner.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

border:#000 solid 4px;

Example

answered Dec 04 '13 at 17:44

abfurlan

415
5
14

score 0 · Answer 5 · answered Dec 04 '13 at 17:47

You can mimik inside border with second border of child element

<style type="text/css">
body {
  background:#f0f5f9;
}
.border-outside{
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border:white solid 8px;
  background-color: white;
}
.border-inside {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #7bada4;  
}
</style>
<body>
<div class="border-outside">
<div class="border-inside">  
content
</div>
</div>
</body>

CSS - border radius and solid border curved inside

5 Answers5

Linked