Question

As you can see in this example, two nested elements with the same pixel value for rounded borders don’t match up:

http://jsfiddle.net/bMFaH/

Now, is there some kind of javascript that I could run to “calculate”, based on width/height/border thickness/… what the inner border-radius should be?

Reason is I would need this for a lot of different (user set) border-radiuses and element sizes, so I can’t just input a static value.

Edit: OK did some further testing, is this correct:

Outer radius: x pixels
Outer border: y pixels
Inner radius: x-y pixels

Thanks in advance,
Wesley

Answer 1

Assuming you know how to get and set css values, the “formula” to get the outer border-radius is

inner.border-radius + outer.border-width

Seems quite straight-forward to get javascript script doing the math.

EDIT:
Or, as you mentionned, you can calculate inner border-radius with outer.border-radius – outer.border-width as well.