CODEWITHSUNDEEP
css
Guesser
Guesser

Reputation: 1857

CSS - border radius and solid border curved inside

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.

Upvotes: 12

Views: 30795

Answers (5)

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

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/

Upvotes: 2

adam187
adam187

Reputation: 3393

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>

Upvotes: 0

oezi
oezi

Reputation: 51797

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;

Upvotes: 6

abfurlan
abfurlan

Reputation: 415

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

Upvotes: 0

Marc
Marc

Reputation: 432

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;

Upvotes: 18

Related Questions