The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

/* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; /* Global values */ border-top-left-radius: inherit; border-top-left-radius: initial; border-top-left-radius: revert; border-top-left-radius: revert-layer; border-top-left-radius: unset;

/* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* Percentage values */ /* circle if box is a square or ellipse if box is a rectangle */ border-bottom-left-radius: 20%; /* same as above: 20% of horizontal(width) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of horizontal(width) and 10% of vertical(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ border-bottom-left-radius: 0.5em 1em; /* Global values */ border-bottom-left-radius: inherit; border-bottom-left-radius: initial; border-bottom-left-radius: revert; border-bottom-left-radius: revert-layer; border-bottom-left-radius: unset;

The border-start-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

#example1 { border-radius: 2em / 5em; } /* is equivalent to: border-top-left-radius: 2em 5em; border-top-right-radius: 2em 5em; border-bottom-right-radius: 2em 5em; border-bottom-left-radius: 2em 5em; */ #example2 { border-radius: 2em 1em 4em / 0.5em 3em; } /* is equivalent to: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; */ Try it Yourself » ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected] · If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected] · HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial

The border-start-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing ...

The border-end-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

This tool can be used to generate CSS border-radius effects.

November 10, 2022 - You may also specify the radiuses in which the corner is rounded by. In other words, the rounding doesn’t have to be perfectly circular, it can be elliptical. This is done using a slash (/) between two values: .element { border-radius: 10px / 30px; /* horizontal radius / vertical radius */ }

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the ...

div { border-top-right-radius: 40%; background-color: lightgreen; border: solid 1px black; width: 200px; height: 100px; } ... This page was last modified on ⁨Nov 17, 2025⁩ by MDN contributors.

Use utilities like rounded-s-md and rounded-se-xl to set the border radius using logical properties, which map to the appropriate corners based on the text direction:

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

border-radius: 30px; Copy to Clipboard · border-radius: 25% 10%; Copy to Clipboard · border-radius: 10% 30% 50% 70%; Copy to Clipboard · border-radius: 10% / 50%; Copy to Clipboard · border-radius: 10px 100px / 120px; Copy to Clipboard · border-radius: 50% 20% / 10% 40%; Copy to Clipboard ·

The border-end-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs. ... Cet outil peut être utilisé afin de générer du code pour la propriété border-radius.

... This feature is well established ... 2015 г.⁩. ... border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока....