Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-top-left-radius

border-top-left-radius

Specifies the radius of the top-left corner of an element.

You can specify separate horizontal and vertical radii by separating values with a space. If omitted, a uniform radius (perfect circle) is used.

Sample Code

style.css

/* 50% circular corner */
div.test { border-top-left-radius: 50%;}

/* Elliptical corner: horizontal 50px, vertical 25px */
div.test1 { border-top-left-radius: 50px 25px;}

/* Pixel value */
div.test2 { border-top-left-radius: 8px;}

/* No rounding (default) */
div.test3 { border-top-left-radius: 0;}

/* Tab component: round only the top corners */
.tab {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Comparison: shorthand vs. individual property */
div.shorthand { border-radius: 20px 0 0 0;}          /* Only top-left */
div.longhand  { border-top-left-radius: 20px;}

Available Values (border-color)

Value	Description
Number	Specified as a numeric value. Common units are 'px' and '%'. When using '%', the reference is the element's size (border box). The initial value is '0'.

Browser Preview

The background color of the samples below is set to '#00f'.

<div style="border-top-left-radius: 50%; background-color: #00f; margin: 0 auto; width: 100px; height: 100px;"></div>

<div style="border-top-left-radius: 50px 25px; background-color: #00f; margin: 0 auto; width: 100px; height: 100px;"></div>

Browser Support

Desktop

Chrome

4+ ○

3 △

2 △

1 △

↑ Requires prefix '-webkit-'

Firefox

4+ ○

3 △

2 △

1 △

↑ Supported as '-moz-border-radius-topleft'

Safari

5+ ○

4 △

3 △

↑ Requires prefix '-webkit-'

2 and earlier ×

Edge

12+ ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

10.5+ ○

9 and earlier ×

Mobile

iOS Safari

4.2+ ○

3 △

2 △

1 △

↑ Requires prefix '-webkit-'

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN / Can I Use.

Overview

Specifies the radius of the top-left corner of an element.

When using '%', the reference value is the element's size (border box).

You can set separate horizontal and vertical radii by separating values with a space. The value before the space is the horizontal radius, and the value after is the vertical radius. This allows for an elliptical corner shape. If omitted, a uniform radius (perfect circle) is used.

/* div { border-top-left-radius: horizontal vertical;} */
div.test { border-top-left-radius: 50% 25%;}

Note: Some older Android browsers have a bug where specifying 'border-top-left-radius' with a '%' value results in no rendering.

If you find any errors or copyright issues, please contact us.

Home