From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Rounding corners

Rounding corners - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Rounding corners

Rounding corners used to be something that every designer had a specific technique to achieve. Pure CSS rounded corners weren't possible in the past, so people created images, used transparent GIFs, nested div tags. There were a ton of different methods that people would use. Now with the adoption of the recent border-radius property and its widespread support within browsers, it's as simple now as declaring a single property. So we are going to talk about the border-radius property. It can accept either length or a percentage value, so you can say I want it to round by 25 pixels, or I want to round it by 10%. Now if you use a single value, all corners are rounded equally. For more than a single value, when you use the border-radius shorthand, it gets a little convoluted. So what we are going to do is we are going to go through all of the options for the syntax--and there are a quite a few of them--and then we are going to talk about ways that you can sort of creatively use…

Contents