When you have and element within another padded element, both with different backgrounds and both with border-radius, make sure the inside element’s border-radius is a bit less than the outer element.
Otherwise it makes kind of a too-thick “hump” around the edges.
There probably is some fancy math you could do to figure out the perfect values, but I find eyeballing it works pretty well.
Great tip Chris!!! Man, I really hope everything gets resolved with your domain. I can´t believe there is such evil in the world. You give us your knowledge for free, and some selfish person just decides to mess with you. Come on man (to hacker), please leave Chris alone!
Hi chris.
I would love to hear recent news regarding the domain, you keep giving great tips like that, I would hate to see it down!
You just need to make sure the two curves share the same center point. The difference in border radius should be the same as the distance between the borders.
If you’re using a border that’s
5pxwide and an outer border-radius of25pxthe inner border radius should be20px.There’s nothing fancy about the math.
Beat me to it!
I dunno, maybe. It seems to make sense, but that’s about the exact scenario as above. Outer had border radius of 20px and padding of 5px, but having the inner with 15px didn’t work, it was too straight/skinny. 17px felt more correct. How does that math work out?
This is an area where a CSS preprocessor can help a lot – rather than some quick math on paper that’s implied by declarative styles, you can make the math a part of the declaration – bonus points for using appropriate variables.
We’ve all run into someone else’s CSS that has implied relationships between one element’s with a 25px border and another element’s 20px border. Code that documents itself makes everyone’s life easier.
Chris, you beat my first response, this one’s to the 17px comment – could this be a browser- or platform-specific rendering issue that makes 17px ‘feel right’?
For exampe {-webkit-background-clip: padding-box;} is a webkit-specific fix for a webkit-specific border radius issue. Different browsers may be off in either direction, and may even change over time as spec implementations mature. Using the most exact value seems like an acceptable hedge.
As always, thanks for posting and keep up the good work – I’m thrilled to hear this domain isn’t going anywhere!
-webkit-background-clip: padding-box; didn’t appear to make a difference for me. (Chrome 15)
All maths is witchcraft as far as I’m concerned.
Great tip. I think the ‘fancy maths’ is quite simple though:
Outer Radius – Padding = Inner Radius
i.e. if the outer has
border-radius:20px; padding:5px, then the inner should haveborder-radius:15px; /* 20px - 5px */Your missing the inner border if there’s any, the final math would be:
border-radius - padding - border-widthThis formula is silly in many ways…just think it through :)
I cant beleive when grown up folks in the creative/programming business talks about `fancy math` when it comes to basic trigonometry.
Nice, really informative Chris. Thanks for sharing such things.
Great, simple tip which should also be used in print designs as well.
Now there’s a quality public service for ya! Nice one Chris
kinda obvious :>
Thanks Chris, this is something I’ve been doing for a while now but instead of any fancy maths I usually have the inner radius half of the outer radius which usually works ok.
Hi Chris. That’s good to know. Thanks :)
Btw. just downloaded Safari to check for browser compatibility when working with my coding. Came her to check out the browser system, because your site rocks! :)
At the bottom of your site, where you got those 4 “boxed” ads (DigWP etc) there’s no rollover effect, just hover-instant in Safari, Opera & Chrome. Works perfect on my main browser -moz-.
Just thought you should know, No idea if that’s even worth fixing, or if its the meaning.
Atleast, some really great stuff on your site. And i LOVE your new top nav. Cheers
Tom.
That’s because: https://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
I did it that way on purpose to highlight that we need this.
http://jsfiddle.net/qSEvC/
here’s a better example, Tom.
Sorry, that was meant for the guy below you :)
Im not quite following you on this one Chris.
http://jsfiddle.net/wWcRK/
I don’t see weird ‘hump’.
Woops, excuse the math in the comment tags, obviously 15 :d
Because in that case the inner border radius is part of the border itself and browsers deal with it for you. In my example above, no borders are used, it’s background-colors on two different elements.
http://jsfiddle.net/qSEvC/
here’s a better example, Wouter.
If you’re just doing it with a border like that, then there’s no need to make the inner div all that fancy either, just put the BG color on the outer div.
http://jsfiddle.net/AJSgU/
Also, if you were just putting text inside, then put the padding on the outer div, and remove the inner div completely. ;-)
Yeah, little tired today, didn’t read properly haha.
@OwenB You’re right, dont know what i was thinking when i tried to duplicate :D
@Noah Thanks mate ;)
Chris, I think the reason it’s better at 17px than the exact 15px is you’re working at a size where anti-aliasing can make 2px-worth of difference to the appearance of the curve. You’re also overlaying a dark colour on top of white and a lighter colour on top of that.
Aha Chris. Missed that valuable post! So what’s the deal with major browsers being so darn slow updating for us dev’s? or maybe, they just cant fix it?
i like the DICK. LOL
Me too, but there’s one detail that got away in the form of a typo “When you have and element” should be “When you have an element”
Oh’ Allah, please help this guy as he is my master [i have learnt alot things from him] and he helps others! Ameen!
I normally consider myself pretty intelligent but I hadn’t figured out “the formula” for getting the two border-radii correct either.
Can anyone else confirm whether the “
border-radius - padding - border-width” trick works? Or as Chris suggests, is it just a matter of fiddling around till you get it right?Thank for the article Mr. Coyier, completely agree with the DICK – *inject shifty look*.
What you want to achieve is that the to ’rounds’ share the same center. In that case the math is easy: outer-border – whats-in-between = inner-border. I’ll try to illustrate:
x———-)—))
But thats only math. What looks good can be little different though bacause of anti-aliasing (with such small radii as 15-20px).
Trust your eyes
Basically we are talking about proportional scaling with rounded corners. Using a formula in this case make no sense at all. Just scale it as much as you feel it looks good.
;-) , I hardly see more detail for radius like your said! Cool!Cheer!
This is a good point Chris. I had noticed the same thing not to long ago and came up with the following guide line:
InnerRadius ~ OuterRadius-(gap/Pi):
That is the border-radius of the inner element is roughly the border-radius of the outer element minus the space between the two( this could come from padding of the outer element or the border width of either element) divided by Pi ( 3 will do in a pinch).
Normally I am dead on with this or off by +/- 1px, so my formula saves me a lot of time guessing, especially on large or complex gaps.
thnx chris
thnkx again!
It might have been nice to credit the original source for this article, who published this advice days earlier in a single tweet: http://twitter.com/LeaVerou/status/142404567995387904
That DICK acronym takes a different meaning in that light.
I reckon this shouldn’t be a kind of illusion (eye-error). I think browsers don’t do the math correctly. Maybe you should submit it as a bug Chris.
Wow thanks so much! I was wondering why one of my boxes looked strange and I just realize it is because of this! Thanks so much!
I love how you pick at the details! Keep it up!
I keep seeing people posting about this kind of thing or doing it in their designs. I put together this little image which hopefully explains whats going on and how to fix it.
basement31 – Multiple Border Radius explained
Thanks, Brendan.
My apologies to Chris, Lea thinks this was co-incidence rather than a rip.
Thanks for the tip. These are the kind of details that actually make a difference!
Great tip, thank U!
i learned this just by eyeballing :) and brute force attempts… usually i use from 2 to 4 pixels less in radius depending on the outer radius…
It’s outer radius – border width = inner radius