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 two radii 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

4.0 3.0 -moz-	5.0 3.1 -webkit-	5.0 4.0 -webkit-	9.0	10.5

CSS Syntax of the ‘border-radius’ Property

background: color | image | position/size | repeat | origin | clip attachment | initial | inherit;

• A single value applies the same radius to all four corners.
• Two values define horizontal and vertical radii for all corners, creating elliptical shapes.
• In that order, four values specify the radii for the top-left, top-right, bottom-right, and bottom-left corners.
• Each corner can optionally have two values (separated by a “/”), specifying horizontal and vertical radii, for more complex shapes.

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).
• Percentage: Defines the radius as a percentage of the element’s size, allowing for scalable, responsive designs.
• Initial: Resets the ‘border-radius‘ to its default value.
• Inherit: Inherits the ‘border-radius‘ from the parent element.