Comments

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!

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!

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.

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.

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.