CSS border-top-left-radius Property

This property defines the radius of an element's top-left corner, allowing you to round off sharp edges.

selector { border-top-left-radius: value; }

<length>	Defines the radius of the corner circle or axes of the corner ellipse using units like px, em, or rem.
<percentage>	Defines the radius as a percentage of the width and height of the element's box.

Code Examples

A basic example showing a blue box with only its top-left corner rounded by 50 pixels.

<div style="width: 200px; height: 100px; background-color: #3498db; border-top-left-radius: 50px; border: 2px solid #2980b9;"></div>

An advanced example using JavaScript to dynamically toggle the top-left radius, demonstrating how the property can be animated or changed via user interaction.

<div id="ui-box" style="width: 250px; height: 150px; background-color: #2ecc71; border: 4px solid #27ae60; border-top-left-radius: 0px; transition: border-radius 0.3s;"></div>
<button onclick="toggleRadius()">Toggle Curve</button>
<script>
function toggleRadius() {
  const box = document.getElementById("ui-box");
  const current = box.style.borderTopLeftRadius;
  box.style.borderTopLeftRadius = current === "80px" ? "0px" : "80px";
}
</script>

Pro Tip

You can create organic, hand-drawn looks or "blob" shapes by using two values for each corner. For example, setting "border-top-left-radius: 100px 50px" creates a long, shallow horizontal curve and a sharp vertical drop. Combine this with different values on the other three corners for unique UI containers.

Deep Dive

Think of this property like a carpenter sanding down the corner of a wooden board. You are telling the browser how much of the corner to trim away using a circular or elliptical arc. If you provide one value, the browser creates a perfect circle arc with that radius. If you provide two values, the first sets the horizontal radius and the second sets the vertical, creating an elliptical curve. This rounding affects the background color and images, as well as the border itself. Even if you don't have a visible border, the property still clips the background. If you set "overflow: hidden" on the element, any child content will also be clipped to this rounded corner.

Best Practices

Keep your units consistent across all corners of an element to ensure visual symmetry unless you are intentionally creating an irregular shape. For standard UI elements like buttons or cards, subtle values between 4px and 8px usually look best. Use percentages only when you want the roundness to scale dynamically with the size of the container, which is common for making circles or ovals.

Common Pitfalls

One common mistake is expecting "border-top-left-radius" to work on table elements when "border-collapse" is set to "collapse". You must set it to "separate" for the rounding to appear. Also, keep in mind that if the radius value is larger than half the width or height of the element, the browser will reduce it to fit the box, which might lead to unexpected shapes if your math is off.

Accessibility

Rounded corners are purely decorative and usually don't impact accessibility. However, if you round a corner so much that it cuts off text or makes a button's hit area look smaller than it actually is, you might confuse users with visual or motor impairments. Always ensure your design remains clearly identifiable as an interactive element.

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

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