CSS3 Border-radius (rounded corners)

Method of making the border corners round. Covers support for the shorthand border-radius as well as the long-hand properties (e.g. border-top-left-radius)

Spec	https://www.w3.org/TR/css3-background/#the-border-radius
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			103
		100	102
		99	101	TP
11	99	98	100	15.4	83
10	98	97	99	15.2-15.3	82
9	97	96	98	15.1	81
8	96	95	97	15	80
Show all
7	95	94	96	14.1	79
6	94	93	95	14	78
5.5	93	92	94	13.1	77
	92	91	93	13	76
	91	90	92	12.1	75
	90	89	91	12	74
	89	88	90	11.1	73
	88	87	89	11	72
	87	86	88	10.1	71
	86	85	87	10	70
	85	84	86	9.1	69
	84	83	85	9	68
	83	82	84	8	67
	81	81	83	7.1	66
	80	80	81	7	65
	79	79	80	6.1 ⁽¹⁾	64
	18	78	79	6 ⁽¹⁾	63
	17	77	78	5.1 ⁽¹⁾	62
	16	76	77	5	60
	15	75	76	4 ^(*)	58
	14	74	75	3.2 ^(*)	57
	13	73	74	3.1 ^(*)	56
	12	72	73		55
		71	72		54
		70	71		53
		69	70		52
		68	69		51
		67	68		50
		66	67		49
		65	66		48
		64	65		47
		63	64		46
		62	63		45
		61	62		44
		60	61		43
		59	60		42
		58	59		41
		57	58		40
		56	57		39
		55	56		38
		54	55		37
		53	54		36
		52	53		35
		51	52		34
		50	51		33
		49 ⁽²⁾	50		32
		48 ⁽²⁾	49		31
		47 ⁽²⁾	48		30
		46 ⁽²⁾	47		29
		45 ⁽²⁾	46		28
		44 ⁽²⁾	45		27
		43 ⁽²⁾	44		26
		42 ⁽²⁾	43		25
		41 ⁽²⁾	42		24
		40 ⁽²⁾	41		23
		39 ⁽²⁾	40		22
		38 ⁽²⁾	39		21
		37 ⁽²⁾	38		20
		36 ⁽²⁾	37		19
		35 ⁽²⁾	36		18
		34 ⁽²⁾	35		17
		33 ⁽²⁾	34		16
		32 ⁽²⁾	33		15
		31 ⁽²⁾	32		12.1
		30 ⁽²⁾	31		12
		29 ⁽²⁾	30		11.6
		28 ⁽²⁾	29		11.5
		27 ⁽²⁾	28		11.1
		26 ⁽²⁾	27		11
		25 ⁽²⁾	26		10.6
		24 ⁽²⁾	25		10.5
		23 ⁽²⁾	24		10.0-10.1
		22 ⁽²⁾	23		9.5-9.6
		21 ⁽²⁾	22		9
		20 ⁽²⁾	21
		19 ⁽²⁾	20
		18 ⁽²⁾	19
		17 ⁽²⁾	18
		16 ⁽²⁾	17
		15 ⁽²⁾	16
		14 ⁽²⁾	15
		13 ⁽²⁾	14
		12 ⁽²⁾	13
		11 ⁽²⁾	12
		10 ⁽²⁾	11
		9 ⁽²⁾	10
		8 ⁽²⁾	9
		7 ⁽²⁾	8
		6 ⁽²⁾	7
		5 ⁽²⁾	6
		4 ⁽²⁾	5
		3.6 ^(2,*)	4 ^(*)
		3.5 ^(2,*)
		3 ^(2,*)
		2 ^(2,*)

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
15.4	all	99	10	64	100	98	11	12.12	16.0	10.4	7.12	2.5 ⁽²⁾
15.2-15.3		4.4.3-4.4.4	7	12.1			10		15.0
15.0-15.1		4.4		12					14.0
14.5-14.8		4.2-4.3		11.5					13.0
Show all
14.0-14.4		4.1		11.1					12.0
13.4-13.7		4		11					11.1-11.2
13.3		3		10					10.1
13.2		2.3							9.2
13.0-13.1		2.2							8.2
12.2-12.5		2.1 ^(*)							7.2-7.4
12.0-12.1									6.2-6.4
11.3-11.4									5.0-5.4
11.0-11.2									4
10.3
10.0-10.2
9.3
9.0-9.2
8.1-8.4
8
7.0-7.1
6.0-6.1
5.0-5.1
4.2-4.3
4.0-4.1
3.2 ^(*)

Notes

Safari 6.1 and earlier did not apply border-radius correctly to image borders: https://stackoverflow.com/q/17202128
Dotted and dashed rounded border corners are rendered as solid in Firefox. see bug

^* Partial support with prefix.

Bugs

Android Browser 2.3 does not support % value for border-radius.
Border-radius does not work on fieldset elements in IE9.
The stock browser on the Samsung Galaxy S4 with Android 4.2 does not support the border-radius shorthand property but does support the long-hand properties for each corner like border-top-left-radius.
Dotted and dashed rounded border corners are rendered as solid in Firefox. Fixed since Firefox 50. see bug
Border-radius does not work on iframe elements in Safari

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/border-radius

Name	Support Tables
Version
Badge
Last Updated	2022-04-11T17:49:08Z