Webzstore
The CSS 'border-bottom-left-radius' property defines the radius of the curve at the bottom-left corner of an element's border. This property allows for the creation of rounded corners, enhancing the visual design of elements by softening or emphasizing their shape. It's particularly useful for designing user interface elements like buttons, cards, and dialog boxes that benefit from a less boxy appearance.
CSS 'border-bottom-left-radius' Property Examples
See the Pen CSS 'border-bottom-left-radius' Property by Webzstore (@webzstore) on CodePen.
The 'border-bottom-left-radius' property is a key tool in the CSS arsenal for creating visually appealing, rounded corner designs, enhancing the user experience through softer, more engaging element shapes.
Browser Support For 'border-bottom-left-radius' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 4 | Jan 2010 |
| Edge | 12 | Jul 2015 |
| Firefox | 4 | Mar 2011 |
| Safari | 5 | Jun 2010 |
| Opera | 10.5 | Mar 2010 |
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-bottom-left-radius for the full compatibility details, including mobile browsers.
CSS Syntax of the 'border-bottom-left-radius' Property
border-bottom-left-radius: length | percentage | initial | inherit;
Usage of the 'border-bottom-left-radius' Property
Use 'border-bottom-left-radius' when you want to specifically target and apply a rounded corner to the bottom-left corner of an element. This selective rounding can be used to create unique shapes and visual effects or to adhere to specific design languages that call for varied corner treatments across a single element.
Property Values of the 'border-bottom-left-radius' Property
- Length: Specifies the radius of the curve using length units (e.g., px, em). This value determines the size of the rounded corner.
- Percentage: Sets the radius as a percentage of the element's dimensions, allowing for scalable, responsive designs.
- Initial: Resets the 'border-bottom-left-radius' to its default value, which is 0, resulting in a square corner.
- Inherit: The element inherits the 'border-bottom-left-radius' value from its parent element.
