Rounded Corners Border Css
The first value is for the top left corner, second for the top right corner, third for the bottom left corner and fourth for the bottom right corner. Share improve this answer answered Jul 14 '12 at 12:46.
I guess the title is kind of hard to understand, so I'll explain.I am trying to achieve this effect:
(a box which has rounded corners and its border, which also has rounded borders).
I've managed to do this, by using the background-clip property:
(rounded corners for border but not for inner box)
The question is, how can I achieve rounded corners for the inner box?
Thank you!
EDIT
The HTML I am using:
And the CSS:
linkyndylinkyndy8 Answers
Inner border calculations
First, you'll need to remove -vendor-background-clip: padding-box or set them to border-box the default in order to achieve the inner border radius.
The inner border radius is calculated as the difference of the outer border radius (border-radius) and the border width (border-width) such that
inner border radius = outer border radius - border width
Whenever the border-width is greater than the border-radius, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the inner-border-radius, so you'll need to calculate it manually.
In your case:
inner border radius = 6px - 5px = 1px
Your new CSS should be:
Simply subtract the border-radius (6px) values from the border-width value (5px) in order to achieve your desired inner-border-radius:
Code that works for me
Tested on Firefox 3.x, Google Chrome, and Safari 5.0
Adding color overlays in JavaScript
I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.
Applying General Borders
Css Round Corners Of Image
Are you using a separate box <div> for your border through its background property? If so, you'll need to apply border-radius and its vendor specific properties on both the border box and the inner box:
A much more efficient way would simply have the inner-box manage its own border:
CSS-wise, you could just declare a .rounded-border class and apply it to every box that will have rounded borders:
And apply the class to any boxes that will have rounded borders:
For a single box element, you'll still be required to declare the border size in order to be shown:
Gio BorjeGio BorjeAnother solution is to have matching inner and outer borders combined with border-radius is to 'fake' the border using the <spread-radius> value of the box-shadow property. This produces a solid shadow which can easily pass for a regular border.
For instance, to achieve a 4px border and a 4px white border radius, try this:
If you want to add a 'real' drop shadow to the entire container, you can simply chain your shadow statements like so:
Note: Keep in mind here that the order of the statements is the order in which it will be rendered.
The only thing to beware of is that the initial 'faux border' will overlap the first X pixels (where X is the width of the border) of any shadow you want beneath it (and combine, if you're using RGBa opacity on it below 100%.)
So it won't work in all situations, but it'll get the majority. I use this pretty frequently when regular borders are not ideal.
nickbnickbSince there is no such thing as inner-border-radius for CSS, the browsers default it to border-radius - border-width. If you don't like that, the typical solution is to create two divs with borders to mimic the inner border radius but this solution brings in more design into the html. It is also a pain if it's a common border template used through out the site.
Css Table Rounded Corners Border Collapse
I managed to figure a way to keep it all in css by producing the inner div using :after and content: '. So for your case it would be:
Based on Leo Wu's idea, here it is my solution:
ZsoltiZsoltiYou need to have two div elements, one inside the other, and use a cross browser rounded corner css, like this:
BoltClock♦The problem is not the coding of the CSS but the mathematics of a circle.Essentially your border-inner-radius (I know this property does not exist) is equal to the border-radius - border-width.
Quite simply work out what you want your inner radius to be and then add the width of the border to achieve the desired effect.
border-inner-radius + border-width = border-radius
You need to make the border-radius to a value greater than the border-width until you start to see a curve. It's not a set formula to set the border-radius of +1px greater than border-width. However, it's going to be a positive value, definitely. You need to experiment in the different browsers where you need this until you see the smallest possible border-radius value that works good enough for you in most browsers. (Some browsers may not support this.) For instance, in Google Chrome, I set a border-width to 10px, but had to set the border-radius to 13px before I started to see a semblance of an inner border curve, while 15px worked even better.
VolomikeVolomikeJust in case someone is Googling for this answer and got sent here, here is the simple, easy way to do this...
Example HTML...
Example CSS...
...Presto.
Nick SteeleNick Steele