CSS Border-radius Property Explained and Illustrated

CSS Border-Radius is a css property that allows you to round the corners of elements on your website. In the past you had to do this with images, but with CSS3 you can easily do it with cascading stylesheets.

Here's the CSS from the video if you want to copy and paste it into your project:

#roundborder {
width:200px;
margin:100px 0 0 100px;
padding:20px;
background-color:#f7f0c5;
border:5px solid #000000;
border-radius:10px;
}

The part of that CSS code that actually does the rounding is border-radius:10px;

That will create a rounding with a radius of 10 pixels on each of the corners.

You can also apply different rounding radii to different corners. For example:

border-radius:10px 0px 25px 3px;

That will apply a rounded corner of 10px to the top left corner. A corner with 0px radius on the top right. A corner with 25 pixels radius to the bottom right. And finally, a corner with 3 pixels radius to the bottom left.

For the css border-radius property you are able to add one value, two values, three values and 4 values.

If there is one value in the padding shorthand then that value is applied to all sides.

If there are two values then the first value is applied top and bottom and the second value is applied left and right.

If there are three values then the first value is applied to the top, the second value is applied left and right and the third value is applied to the bottom.

If there are four values then the first value is applied to the top, the second value is applied to the right, the third value is applied to the bottom and the fourth value is applied to the left.

A great way to remember the order of padding (and of margins coincidently) is the word TROUBLE. If you remove all of the vowels you are left with TRBL.

TRBL is an acronym for Top, Right, Bottom, and Left. Which is the order of application when all 4 values are in the padding parameter.

That's all there is to it. I hope this video helps you! If you have any questions, please leave them in the comments below. And before you go, subscribe and like :)

If you're into Wordpress, check out my WPLearningLab channel to learn more about WordPress so you can earn more for yourself, for your clients or for your business.