Trusted answers to developer questions
Trusted Answers to Developer Questions


How to create a border radius in CSS

Lateefat Salami

What is the border-radius?

border-radius is a CSS property that defines the radius of the corners of an element.

It gives a rounded shape to the corners of an element’s outer border edge. The values of the border radius can be declared in percentages or length units.

The image below shows the different corners of an element.

The four corners of an element


border-radius: num_px percentage;


  • num_px: This is the number of pixels you want for the radius.
  • percentage: This is the percentage you want the border to be edited.

You can also use the inherit, initial, revert, or unset properties.

How to use border-radius

The border-radius property can have one to four values.

The corners are rounded depending on the value passed into the property.

We have stated the range of values that can be declared, so let’s move on and see how it works.

One value border-radius

When you pass in one value into the border-radius, it rounds all the corners of your elements equally.

Example 1

Two value border-radius

When you pass two values into the border-radius property, the first value will be used for the top-left and bottom-right corners.

The second value will be used for the top-right and bottom-left corners.

Example 2

Three value border-radius

For three values, the first value is used for the top-left corner.

The second value is used for the top-right and bottom-left corners, while the third value is used for the bottom-right corner.

Example 3

Four value border-radius

When four values are declared, the first value is used for the top-left corner, the second value for the top-right corner, the third value applies to bottom-right corner and the fourth value applies to bottom-left.

Example 4



View all Courses

Keep Exploring

Learn in-demand tech skills in half the time

Copyright ©2022 Educative, Inc. All rights reserved.