VOOZH about

URL: https://www.geeksforgeeks.org/css/css-border-radius-property/

⇱ CSS border-radius Property - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS border-radius Property

Last Updated : 22 May, 2026

The border-radius property in CSS is used to create rounded corners for HTML elements. It enhances the visual appearance of web pages by giving elements a smoother and more modern design.

  • The property can accept one to four values to control each corner individually.
  • It is commonly used to create rounded buttons, cards, and circular shapes.
  • border-radius does not work properly on tables with border-collapse: collapse.

Syntax

border-radius: 1-4 length | % / 1-4 length | %|initial | inherit;

Property Values

Property ValueDescription
lengthRepresents the shape of the corners, typically in units like px, em, or rem. The default value is 0.
percentage (%)Represents the shape of the corners in percentage, where the rounding is relative to the element's size.
initialResets the element's CSS property to its default value.
inheritInherits the property value from the parent element.

Shorthand Notations for border-radius

  • Apply Radius value to all four corners:
border-radius: value;
  • Apply value1 to top-left and bottom-right corners and value2 to top-right and bottom-left corners:
border-radius: value1 value2;
  • Apply value1 to top-left corner, value2 to top-right and bottom-left corners and value3 to bottom-right corner:
border-radius: value1 value2 value3;
  • Apply value1 to top-left corner, value2 to top-right corner , value3 to bottom-right corner and value4 to bottom-left corner:
border-radius: value1 value2 value3 value4;

The 4 values for each radius can be specified in the following order as top-left, top-right, bottom-right, bottom-left. If the bottom-left is removed then it will be the same as the top-right. Similarly, If the bottom-right & top-right will be removed then it will be the same as the top-left & the top-left respectively.

CSS Border Radius Examples

border-radius: 35px; sets the border-radius of each corner. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius. It sets all corners to the same value.

Example 1: Rounded Corners for all Sides

This demonstrates how the border-radius property is applied to round the corners of an element. The border-radius: 35px; value rounds all four corners of the green box uniformly, giving it smooth, curved edges. The element is styled with padding, a fixed width, and height, along with centered text.

border-radius: 20px 40px; sets first value as top-left and bottom right corner and second value as top right and bottom left corners.

Example 2: Rounded Corners with Two Values

Here, the border-radius property is set to two values, 20px 40px. The first value (20px) applies to the top-left and bottom-right corners, while the second value (40px) applies to the top-right and bottom-left corners. This results in asymmetrical rounded corners, creating a unique design for the element. The element also has padding, a fixed width, and height, with centered text.

Example 3: Rounded Top-Left Corner

Here, the border-top-left-radius property is applied to round only the top-left corner of the element with a value of 35px. The other corners remain unchanged, creating a smooth curve on the top-left side while the rest of the box retains sharp edges. The element is styled with padding, a fixed width, and height, with centered text.

Comment
Article Tags:
Article Tags: