3:29
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property
Video Steps
1. Begin with a normal styled element such as a div
2. To style all four corners of the div to be the same degree of roundness, use the "border-radius:" property and type a pixel value. The larger the number, the rounder the corner will be. A value of 0px will lead to a 90-degree angled corner
3. To style all four corners to have different degrees of roundness, type four different pixel values
4. The four different pixel values will style the corners clockwise starting from the top left. The first value will style the top left corner, the second value will style the top right corner, the third value will style the bottom right corner, and the fourth value will style the bottom left corner
5. For maximum compatibility, copy your border-radius property three more times, each time with a different compatibility prefix. You should end up with border-radius, -moz-border-radius, -webkit-border-radius, and -o-border-radius
0 Comments
Suggested Videos
| Title | Views | Activity |
|---|---|---|
| Creating Scalable Full-Page Backgrounds in CSS3 | 144 | |
| Using Google Font API in CSS | 69 | |
| Introduction to CSS (Part 1) | 80 | |
| Flexible Layouts | 74 |
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Suggested Courses
Next Video:Box Shadow Effect in CSS