The border-radius property in CSS

Web Design with HTML & CSS

🕑 This lesson will take about 5 minutes

This tutorial explains how to use the border-radius property in CSS. The border-radius property defines the radius of an element's corners, such as the corners of a div or an image. This lesson explains how to use the border-radius property to add rounded corners to a div. The image below shows an example of a div with rounded corners.

You can set the border-radius property for a div without having to set a border at all. You can also use the CSS border-radius property to add rounded corners to images, buttons, divs or other elements on your page.

Watch the video below and then scroll down to see the sample code:

Here is the HTML and CSS code showing how to set the same border-radius for all corners:

The example CSS code below shows how to set different radius values for each corner of a div.

Next lesson: Linear gradients