Important

This slide deck was created for use in a controlled environment, during a talk. It works best with (modern) Firefox OSX at 1024x768. Use Ctrl + {A, S, Z, X} in the live code examples to expose the inner & outer radii sizes of the top corners. The demos were live coded, so these slides are a bit pointless if you never watched the talk.

The humble
border-radius

By Lea Verou (@LeaVerou)

Hi, I’m Lea

CSS WG Invited Expert, O’Reilly author (ETA Q4 2014), Ex-W3C staff. Made Prism, Dabblet, -prefix-free & more

And I’m Mr. Border-Radius.
You don’t think I’m cool, but you’re wrong.

Basic usage (single value, different radius per corner)

Browser
support

Unprefixed since 5.0,
with -webkit since 1.0

Unprefixed since 4.0,
with -moz- since 2.0

Unprefixed since 10.5, no support in Mini

Unprefixed since 9.0

Unprefixed since 5.0 (4.0 in iOS),
with -webkit- since 3.1 (3.2 in iOS)

Unprefixed since 2.2,
with -webkit- since 2.1

That’s all. KTHXBAI!

w3.org/TR/css3-background/#corners

Page 1 Page 2 Page 3
Page 4 Page 5 Page 6

Different radius per corner

border-radius: 20px 100px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-radius: 20px 100px 50px;
border-top-left-radius: 20px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 50px;
border-radius: 20px 100px 50px 0;
border-top-left-radius: 20px;
border-top-right-radius: 100px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 0;

What you specify is not always what you get

“When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.”

CSS Backgrounds & Borders Level 3

Or, as they say
in Maths...

r′ top-left = min ( r top-left , width × r top-left r top-left + r top-right )

↑ Isn’t MathML awesome?
docs.webplatform.org/mathml

↑ This would look much better if MathML was supported :(
docs.webplatform.org/mathml

What we just learned

Elliptical curves, percentages & interesting shapes

½
¼

A few more shapes

border-radius:
20px 200px 0 100px / 40px 100px 50px;
border-top-left-radius: 20px 40px;
border-top-right-radius: 200px 100px;
border-bottom-right-radius: 0 50px;
border-bottom-left-radius: 100px;

What we just learned

Borders & inner radius

“The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness. In the case where this results in a negative value, the inner radius is zero.”

CSS Backgrounds & Borders Level 3

Or, as they say
in Maths...

r inner = max ( 0 , r outer - border ) r outer r inner + border

Different border widths & colors

What we just learned

Interaction with shadows and outlines

What we just learned

border-radius in the 4th dimension

What we just learned

border-radius and overflow

But the bravest man amongst us is afraid of himself. The mutilation of the savage has its tragic survival in the self-denial that mars our lives. We are punished for our refusals. Every impulse that we strive to strangle broods in the mind and poisons us. The body sins once, and has done with its sin, for action is a mode of purification. Nothing remains then but the recollection of a pleasure, or the luxury of a regret. The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful. It has been said that the great events of the world take place in the brain. It is in the brain, and the brain only, that the great sins of the world take place also. You, Mr. Gray, you yourself, with your rose-red youth and your rose-white boyhood, you have had passions that have made you afraid, thoughts that have fined you with terror, day-dreams and sleeping dreams whose mere memory might stain your cheek with shame—’”
— Oscar Wilde, The Picture of Dorian Gray

What we just learned

Scripting

What we just learned

The future...

Until then... (bevel)

Until then... (scoop)

HELP!!!11 I think I just forgot everything!

Resources

Making of