Tutorial CSS Border Radius - Border-radius:

[Malcolm]

CSS Border Radius Property
Hello Coders!

Another quick tutorial! This tutorial is using the border-radius property to create rounded corners to rounded elements. You should have an understanding of both HTML & CSS, you can check out What is HTML & What is CSS for more info.

In this tutorial, we will cover the basic CSS syntax and how border-radius can be used. First, understand that border-radius is actually a CSS property which means it goes within a CSS statement. As shown below:
Basic Syntax:

selector {
    border-radius:value;
}

Note: border-radius will change all four corners of an element. However, you can change a specific corner which I will cover further down.
Example:
[CODE lang="css" highlight="2"]img {
border-radius /* border-radius is a property which requires a value.*/
}[/CODE]
However, border-radius requires a value, you can use pixels, percentages etc. Like so:
[CODE lang="css" highlight="2"]img {
border-radius: 10px; /* border-radius has a value of 10px*/
}[/CODE]

Example Usage:
Image with soft corners.

Code	Before:	After:
[CODE lang="css" title="Code without Border Radius"]img { width: 200px; height: 200px; }[/CODE]	​	​
img { width: 200px; height: 200px; border-radius: 10px; }	​	​
img { border-radius: 50%; }	​	​
img { border-top-left-radius: 10px; }	​	​
img { border-top-right-radius: 10px; }	​	​
img { border-bottom-left-radius: 10px; }	​	​
img { border-bottom-right-radius: 10px; }	​	​
img { border-top-right-radius: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 10px; }	​	​
This code simplifies all the other examples in one line of code. You can use which ever you prefer. A tip on how to read the values below: Look at it as a clock, 10px is top, 40px is right, 20px bottom and 5px left. img { border-radius: 10px 40px 20px 5px; }	​	​

I hope this helps you get started with Border-radius. Let me know if you have any questions!