Border radius

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Base class	{value}	Property value	default
_bdrd-{value} _bdtrrd-{value} _bdtlrd-{value} _bdbtrrd-{value} _bdbtlrd-{value}	1	var(--spc-1)	0rem
	2	var(--spc-2)	0.0625rem
	3	var(--spc-3)	0.125rem
	4	var(--spc-4)	0.25rem
	5	var(--spc-5)	0.5rem
	6	var(--spc-6)	0.75rem
	7	var(--spc-7)	1rem
	8	var(--spc-8)	1.5rem
	9	var(--spc-9)	2rem
	10	var(--spc-10)	2.5rem
	11	var(--spc-11)	3rem
	12	var(--spc-12)	4rem
	13	var(--spc-13)	6rem
	max	9999px
	50pct	50%
	100pct	100%
	at	auto
	us	unset
	ihr	inherit

All classed

Class name	Properties	default
_bdrd-1	border-radius: var(--spc-1)	0rem
_bdrd-2	border-radius: var(--spc-2)	0.0625rem
_bdrd-3	border-radius: var(--spc-3)	0.125rem
_bdrd-4	border-radius: var(--spc-4)	0.25rem
_bdrd-5	border-radius: var(--spc-5)	0.5rem
_bdrd-6	border-radius: var(--spc-6)	0.75rem
_bdrd-7	border-radius: var(--spc-7)	1rem
_bdrd-8	border-radius: var(--spc-8)	1.5rem
_bdrd-9	border-radius: var(--spc-9)	2rem
_bdrd-10	border-radius: var(--spc-10)	2.5rem
_bdrd-11	border-radius: var(--spc-11)	3rem
_bdrd-12	border-radius: var(--spc-12)	4rem
_bdrd-13	border-radius: var(--spc-13)	6rem
_bdrd-max	border-radius: 9999px
_bdrd-50pct	border-radius: 50%
_bdrd-100pct	border-radius: 100%
_bdrd-at	border-radius: auto
_bdrd-us	border-radius: unset
_bdrd-ihr	border-radius: inherit
_bdtlrd-1	border-radius: var(--spc-1)	0rem
_bdtlrd-2	border-radius: var(--spc-2)	0.0625rem
_bdtlrd-3	border-radius: var(--spc-3)	0.125rem
_bdtlrd-4	border-radius: var(--spc-4)	0.25rem
_bdtlrd-5	border-radius: var(--spc-5)	0.5rem
_bdtlrd-6	border-radius: var(--spc-6)	0.75rem
_bdtlrd-7	border-radius: var(--spc-7)	1rem
_bdtlrd-8	border-radius: var(--spc-8)	1.5rem
_bdtlrd-9	border-radius: var(--spc-9)	2rem
_bdtlrd-10	border-radius: var(--spc-10)	2.5rem
_bdtlrd-11	border-radius: var(--spc-11)	3rem
_bdtlrd-12	border-radius: var(--spc-12)	4rem
_bdtlrd-13	border-radius: var(--spc-13)	6rem
_bdtlrd-max	border-radius: 9999px
_bdtlrd-50pct	border-radius: 50%
_bdtlrd-100pct	border-radius: 100%
_bdtlrd-at	border-radius: auto
_bdtlrd-us	border-radius: unset
_bdtlrd-ihr	border-radius: inherit
_bdtrrd-1	border-radius: var(--spc-1)	0rem
_bdtrrd-2	border-radius: var(--spc-2)	0.0625rem
_bdtrrd-3	border-radius: var(--spc-3)	0.125rem
_bdtrrd-4	border-radius: var(--spc-4)	0.25rem
_bdtrrd-5	border-radius: var(--spc-5)	0.5rem
_bdtrrd-6	border-radius: var(--spc-6)	0.75rem
_bdtrrd-7	border-radius: var(--spc-7)	1rem
_bdtrrd-8	border-radius: var(--spc-8)	1.5rem
_bdtrrd-9	border-radius: var(--spc-9)	2rem
_bdtrrd-10	border-radius: var(--spc-10)	2.5rem
_bdtrrd-11	border-radius: var(--spc-11)	3rem
_bdtrrd-12	border-radius: var(--spc-12)	4rem
_bdtrrd-13	border-radius: var(--spc-13)	6rem
_bdtrrd-max	border-radius: 9999px
_bdtrrd-50pct	border-radius: 50%
_bdtrrd-100pct	border-radius: 100%
_bdtrrd-at	border-radius: auto
_bdtrrd-us	border-radius: unset
_bdtrrd-ihr	border-radius: inherit
_bdbtlrd-1	border-radius: var(--spc-1)	0rem
_bdbtlrd-2	border-radius: var(--spc-2)	0.0625rem
_bdbtlrd-3	border-radius: var(--spc-3)	0.125rem
_bdbtlrd-4	border-radius: var(--spc-4)	0.25rem
_bdbtlrd-5	border-radius: var(--spc-5)	0.5rem
_bdbtlrd-6	border-radius: var(--spc-6)	0.75rem
_bdbtlrd-7	border-radius: var(--spc-7)	1rem
_bdbtlrd-8	border-radius: var(--spc-8)	1.5rem
_bdbtlrd-9	border-radius: var(--spc-9)	2rem
_bdbtlrd-10	border-radius: var(--spc-10)	2.5rem
_bdbtlrd-11	border-radius: var(--spc-11)	3rem
_bdbtlrd-12	border-radius: var(--spc-12)	4rem
_bdbtlrd-13	border-radius: var(--spc-13)	6rem
_bdbtlrd-max	border-radius: 9999px
_bdbtlrd-50pct	border-radius: 50%
_bdbtlrd-100pct	border-radius: 100%
_bdbtlrd-at	border-radius: auto
_bdbtlrd-us	border-radius: unset
_bdbtlrd-ihr	border-radius: inherit
_bdbtrrd-1	border-radius: var(--spc-1)	0rem
_bdbtrrd-2	border-radius: var(--spc-2)	0.0625rem
_bdbtrrd-3	border-radius: var(--spc-3)	0.125rem
_bdbtrrd-4	border-radius: var(--spc-4)	0.25rem
_bdbtrrd-5	border-radius: var(--spc-5)	0.5rem
_bdbtrrd-6	border-radius: var(--spc-6)	0.75rem
_bdbtrrd-7	border-radius: var(--spc-7)	1rem
_bdbtrrd-8	border-radius: var(--spc-8)	1.5rem
_bdbtrrd-9	border-radius: var(--spc-9)	2rem
_bdbtrrd-10	border-radius: var(--spc-10)	2.5rem
_bdbtrrd-11	border-radius: var(--spc-11)	3rem
_bdbtrrd-12	border-radius: var(--spc-12)	4rem
_bdbtrrd-13	border-radius: var(--spc-13)	6rem
_bdbtrrd-max	border-radius: 9999px
_bdbtrrd-50pct	border-radius: 50%
_bdbtrrd-100pct	border-radius: 100%
_bdbtrrd-at	border-radius: auto
_bdbtrrd-us	border-radius: unset
_bdbtrrd-ihr	border-radius: inherit

Modifier