border-top-left-radius

div.test { border-top-left-radius: 50%;}
div.test1 { border-top-left-radius: 50px 25px;}

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>

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+ ○

Supported in all versions

IE

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.

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.