From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 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.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Creating multi-column text6m 36s
-
(Locked)
Using borders to enhance design13m 59s
-
(Locked)
Rounding corners6m 56s
-
(Locked)
Adding drop shadows10m 35s
-
(Locked)
Working with opacity6m 8s
-
(Locked)
Utilizing the background property15m 5s
-
(Locked)
Working with CSS sprites7m 58s
-
(Locked)
Enhancing page design: Lab6m 22s
-
(Locked)
Enhancing page design: Solution8m 38s
-
(Locked)
-