Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS - border radius and solid border curved inside

Tags:

css

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.

like image 233
Guesser Avatar asked Dec 04 '13 17:12

Guesser


People also ask

How do I make the inner border rounded in CSS?

CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.

How do you give the inside border radius?

To actually make the inner border-radius effect a background property with a value equal to the border color must be set to the . content element. For the p element, a background property must be set as well.

How do I remove a curved border in CSS?

-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; This will override any border radius css.


1 Answers

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;
like image 184
Marc Avatar answered Sep 19 '22 23:09

Marc