Frontend Engineering, Volume II

CSS: Chapter 8 Companion—Border Radii

© 2013, Martin Rinehart


Sample divs with round corners and box shadows.

Video: "The Humble Border Radius"

Lea Verou (then with W3C) video, 46:42: http://vimeo.com/70171266.

History

Rounded corners in "the good old days": http://www.schillmania.com/content/projects/even-more-rounded-corners/.

Box shadows without Photoshop: http://www.css3.info/preview/box-shadow/.

The W3C working draft, 2002: http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius.

The birth of border-radius: http://www.the-art-of-web.com/css/border-radius/.

Rounded corners from 2003 (2009-style): http://www.schillmania.com/content/entries/2009/css3-and-the-future/.

Microsoft's prototype corners, circa 2009: http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html.

Circles

David Walsh decorates circles: http://davidwalsh.name/css-circles.

Circles before standards (c. 2010?): http://www.cardeo.ca/how-to-create-circles-with-css3-and-no-images/.

Ovals

A simple oval from Coyier: http://css-tricks.com/the-shapes-of-css/.

Other Shapes

Ovals, and 9 other shapes: http://3easy.org/buildmobile/jquerymobile/.

Lots of simple shapes: http://www.paulund.co.uk/how-to-create-different-shapes-in-css.

A huge collection, some very complex: http://css-tricks.com/examples/ShapesOfCSS/.

Inspirations

Beautiful "aqua" buttons without Photoshop: http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/.


Feedback: MartinRinehart at gmail dot com

# # #