All geek questions in one place

CSS - border radius and solid border curved inside

This style gives a border with smooth corners on the outside of the border, but the insides of the corners are interconnected, can I make them rounded?

img{ -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:white solid 8px; }

enter image description here Please note that the problem is only related to images, the submitted sentences only work with divs.

+6
source share
5 answers

you can use radius radius values ​​twice as large as the boundary value to get rounding angles.

 -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; border:white solid 8px;
+7
source

you need to set a border-radius-value that is larger than the border width . look at this jsfiddle .

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

This method requires the image to be wrapped in a div because - and I'm not sure why - in Safari psuedo elements will not be displayed 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; }

Element :before psuedo sits on top of the image with its inner curved border, basically simulating the inner curved border of the image. This is a pretty nice workaround that allows you a curved inner border.

border-width location of the wrapper and image, and the top , left , right and bottom :before should be two times less than the radius of the border of the wrapper element.

http://jsfiddle.net/nvG5S/

+2
source

If you reduce the thickness of the border, get the expected result or increase the angle.

 -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:#000 solid 4px;

Example

0
source

You can mimik inside the border with the second border of the child

 <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>
0
source

Source: https://habr.com/ru/post/959338/

More articles:


All Articles