CSS 'border-radius' Property Explained

The CSS 'border-radius' property adds rounded corners to an element's border. It can specify a single radius to make circular corners, or a horizontal and a vertical radius (separated by a slash) to make elliptical corners, providing a smoother, more aesthetically pleasing edge to containers, buttons, and other elements within a design.

CSS 'border-radius' Property Examples

See the Pen CSS 'border-radius' Property by Webzstore (@webzstore) on CodePen.

The 'border-radius' property is a powerful tool in the CSS toolkit. It enables designers to easily implement rounded corners and enhance the visual appeal of web elements, contributing to a more modern and user-friendly interface design.

Browser Support For 'border-radius' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-radius for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-radius' Property

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?;

/* Examples */
border-radius: 10px;                 /* all four corners */
border-radius: 10px 5%;              /* top-left and bottom-right 10px; top-right and bottom-left 5% */
border-radius: 2px 4px 2px;          /* top-left 2px; top-right and bottom-left 4px; bottom-right 2px */
border-radius: 1px 0 3px 4px;        /* top-left, top-right, bottom-right, bottom-left */
border-radius: 10px / 20px;          /* elliptical: 10px horizontal radius, 20px vertical radius */

• One value applies the same radius to all four corners.
• Two values set opposite pairs of corners: the first value is the top-left and bottom-right radius, and the second value is the top-right and bottom-left radius.
• Three values set the top-left, then the top-right and bottom-left together, then the bottom-right.
• Four values set the top-left, top-right, bottom-right, and bottom-left corners, in that (clockwise) order.
• A slash ("/") separates the list of horizontal radii (before the slash) from the list of vertical radii (after it), each following the same one-to-four value pattern. This is how you make elliptical corners.

Usage of the 'border-radius' Property

Use 'border-radius' to create rounded corners on the borders of an element. This property can be applied to all corners simultaneously or targeted to specific corners to create a variety of rounded shapes. It's particularly useful for enhancing the user interface with softer, more engaging visual elements.

Property Values of the 'border-radius' Property

• Length: Specifies the radius (or radii) using length units, such as pixels (px) or ems (em). Negative values are invalid.
• Percentage: Defines the radius as a percentage of the element's border box: horizontal radii refer to its width and vertical radii to its height, allowing for scalable, responsive designs.
• Initial: Resets the 'border-radius' to its default value (0 for every corner, so corners are square).
• Inherit: Inherits the 'border-radius' from the parent element.