In CSS3 you can give elements rounded corners with the border-radius property. Let’s look at an example of this.
Suppose you have the following markup.
To make the div visible, we’ll set its width and height and give it a background color of red.
The following is the resulting output of the above.
To make the div’s borders rounded, you could add the following styling:
The above sets a 15 pixel radius on the top-left, top-right, bottom-left and bottom-right corners of the element. The higher the value of the radius, the more rounded the edge becomes.
Below you can see the result of the above markup.
border-radius property can be written in several ways.
Specifying one value for the property will set all four edges of the element to a radius of that value.
border-radius: 15px 15px;
With two values, the first will be applied to the top-left and bottom-right corner while the second is applied to the top-right and bottom-left corners
border-radius: 15px 15px 15px;
With three values, the first will be used for the top-left corner, the second value for the top-right and bottom-left corners, and the third value will be applied to the bottom-right corner.
border-radius: 15px 15px 15px 15px;
The above explicitly sets a value for each edge. The above is a shorthand for the below CSS, which also eplicitly gives a value for each edge.
In the example we’ve looked at, we set the same value for all edges. You can of course set different values for each edge if you so wish.
border-radius: 5px 25px;
Adding Rounded Corners to Buttons
border-radius can be used on other elements as well. Below, we see it used to add rounded corners to a button.
The button will look like this:
Here are some more examples of complete buttons