CSS border-bottom-left-radius Property

This property rounds the bottom-left corner of an element's outer border edge.

selector { border-bottom-left-radius: <length> | <percentage>; }

<length>	Defines the radius of the corner shape using fixed units like px, em, or rem.
<percentage>	Defines the radius relative to the dimensions of the element's border box.

Code Examples

A simple blue box demonstrating a 50 pixel circular radius on the bottom-left corner.

<div style="width: 250px; height: 150px; background: #2196f3; border-bottom-left-radius: 50px;"></div>

An advanced example using JavaScript to toggle between a square corner and an elliptical rounded corner with a smooth transition.

<div id="card" style="width: 200px; height: 200px; background: #eeeeee; border: 2px solid #333333; border-bottom-left-radius: 0px; transition: border-bottom-left-radius 0.3s ease;"></div>
<button onclick="toggleShape()" style="margin-top: 10px;">Toggle Corner</button>
<script>
function toggleShape() {
  const el = document.getElementById("card");
  const isRounded = el.style.borderBottomLeftRadius !== "0px";
  el.style.borderBottomLeftRadius = isRounded ? "0px" : "80px 40px";
}
</script>

Pro Tip

You can create organic, liquid-looking shapes by combining different horizontal and vertical radii, such as "100px 50px". This is a great way to break away from the standard boxy look of the web without using custom images.

Deep Dive

Think of this property like a carpenter using a sander on the corner of a wooden board. You are telling the browser how much material to shave off to create a curve. If you provide a single value, the corner is shaped by a perfect circle arc. If you provide two values separated by a space, the first value defines the horizontal radius and the second defines the vertical radius, resulting in an elliptical curve. The background of the element and any borders are clipped to this curve, making it essential for modern UI shapes.

Best Practices

Use relative units like "rem" to ensure your corner rounding scales properly if a user zooms in or changes their default font size. If you want a perfectly circular corner on a square element, use a single length value. Use percentages if you want the curve to remain proportional to the size of the container as it grows or shrinks.

Common Pitfalls

This property will not show any effect on table elements if the "border-collapse" property is set to "collapse". You must set it to "separate". Also, if your border is thicker than the radius you set, the inner corner will appear sharp while the outer corner is rounded, which can look unintended.

Accessibility

Rounded corners are strictly a visual styling choice and do not interfere with screen readers. Just ensure that heavy rounding doesn't cut into your text content or make buttons look so much like decorative circles that users don't realize they are interactive.

Dev Data Table: border-bottom-left-radius property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	2005
year_standard	2011
js_syntax_1	element.style.borderBottomLeftRadius
js_syntax_2	element.style.setProperty("border-bottom-left-radius", "20px")
js_note	When manipulating this property in JavaScript, use the camelCase version for direct style object access or the kebab-case string when using the setProperty method.
browsers	{ "Chrome": 4, "Edge": 12, "Firefox": 4, "Safari": 5, "Opera": 10.5, "Chrome Android": 18, "Safari on iOS": 5, "Samsung Internet": 1, "Opera Mobile": 11 }