border-bottom-left-radius

Specifically rounds the bottom-left corner of an element. This is useful for creating unique shapes like speech bubbles or tabbed interfaces where only certain corners should be rounded.

Quick example

.speech-bubble {
  border-bottom-left-radius: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

Quick facts

Initial value
0
Inherited
No
Applies to
all elements (UAs not required when collapse)
Animation type
lpc

Values

length-percentage

border-bottom-left-radius Browser Support

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

4+
4+
5+
12+
ESC