Border

Border Radius

Style syntax for setting radius of an element’s corners.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`border-radius:radius` `/` `r:radius`	`border-radius: radius`
`border-radius:radius\|radius` `/` `r:radius\|radius`	`border-radius: radius radius`
`border-radius:radius\|radius\|radius\|radius` `/` `r:radius\|radius\|radius\|radius`	`border-radius: radius radius radius radius`
`rt:radius`	`border-top-left-radius: radius; border-top-right-radius: radius`
`rt:radius\|radius`	`border-top-left-radius: radius radius; border-top-right-radius: radius radius`
`rb:radius`	`border-bottom-left-radius: radius; border-bottom-right-radius: radius`
`rb:radius\|radius`	`border-bottom-left-radius: radius radius; border-bottom-right-radius: radius radius`
`rl:radius`	`border-top-left-radius: radius; border-bottom-left-radius: radius`
`rl:radius\|radius`	`border-top-left-radius: radius radius; border-bottom-left-radius: radius radius`
`rr:radius`	`border-top-right-radius: radius; border-bottom-right-radius: radius`
`rr:radius\|radius`	`border-top-right-radius: radius radius; border-bottom-right-radius: radius radius`
`rtl:radius` `/` `rlt:radius`	`border-top-left-radius: radius`
`rtl:radius\|radius` `/` `rlt:radius\|radius`	`border-top-left-radius: radius radius`
`rtr:radius` `/` `rrt:radius`	`border-top-right-radius: radius`
`rtr:radius\|radius` `/` `rrt:radius\|radius`	`border-top-right-radius: radius radius`
`rbl:radius` `/` `rlb:radius`	`border-bottom-left-radius: radius`
`rbl:radius\|radius` `/` `rlb:radius\|radius`	`border-bottom-left-radius: radius radius`
`rbr:radius` `/` `rrb:radius`	`border-bottom-right-radius: radius`
`rbr:radius\|radius` `/` `rrb:radius\|radius`	`border-bottom-right-radius: radius radius`
`rounded`	`border-radius: 1e9em`
`round`	`border-radius: 50%`

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="border-radius:10:hover border-radius:10@sm border-radius:10@dark border-radius:10@print">…</div>

Border Radius

Overview [sr-only]

Conditionally apply