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 - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.