# 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.

# 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.

# Browsersupport

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

# 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.”

# 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

• We can have different radii per corner, in clockwise order
• Separate properties for every corner are available, like border-top-right-radius
• If the sum of two adjacent radii exceeds the length of their side, they are reduced proportionally

½
¼

# 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

• We can have different horizontal and vertical radii
• Percentages in border-radius refer to the corresponding dimension
• border-radius can take up to 8 (!) lengths
• When either the vertical or the horizontal radius of a corner is 0, there is no rounding

# 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.”

# Or, as they say in Maths...

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

# What we just learned

• border-radius rounds the outer border edge. The inner border radius will be smaller.
• Even with a circular radius, the inner radius might be elliptical, if different border widths are involved.
• If the borders have different colors, the transition will be abrupt and diagonal.

# What we just learned

• box-shadow follows the curves of border-radius
• box-shadow spread adds to the border-radius
• outline is always rectangular
• You can emulate rounded outlines with `box-shadow: 0 0 0 <length> <color>;`

# What we just learned

• border-radius is animatable!
• We can animate between any two radii
• border-radius affects the hit-testing area

# 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

• `border-radius` does not affect text-wrapping
• `overflow: hidden` follows the rounding, but clips text
• Padding can help
• CSS Shapes Level 2 will solve this, but clumsily

# Scripting

• var mrBR = document.querySelector('.mr-border-radius');
• getComputedStyle(mrBR).borderTopLeftRadius;
• "100%"
• "360px 280px"
• getComputedStyle(mrBR).borderTopRightRadius;
• "80px"
• "53.3333px"

# What we just learned

• Incompatibilities in `getComputedStyle()` & `border-radius`
• Firefox converts percentages to pixels, all other browsers report percentages
• When the radius doesn’t fit, Firefox reports scaled down sizes, all other browsers report specified sizes

# Until then... (scoop)

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

# Making of

• This slide deck was entirely built with open web technologies!
• Slideshow framework: github.com/LeaVerou/CSSS
• The illustrations are built with SVG
• Mr. Border-radius’ face is animated with SMIL
• The equations displayed were built with MathML