Overview
The border-radius
CSS property sets 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.
r:0
r:10
r:20|20
r:20|40|40|20
round
rounded
rt:20
rt:20|40
rb:20
rb:20|40
rl:20
rr:20
rtl:20
rtl:20|40
rbl:20
rbl:20|40
rbr:20
rtr:20
Applying with functions
<div class="border-radius:$(radius)">...</div>
Master supports native CSS variables and functions, just add var(--key)
or use shorthand$(key)
for variables.
You can also use calc(expression)
, env(expression)
and other CSS functions if the property supports it.
To learn more, see the Functions documentation.
Conditionally apply
States and selectors
<div class="border-radius:10:hover">...</div>
Master supports all native CSS selectors, just add :hover
, :disabled
, chaining, combinators and other CSS selectors as usual.
To learn more, see the Selectors documentation.
Responsive breakpoints
<div class="border-radius:10@sm">...</div>
Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs
, 2xs
, xs
, sm
,md
, lg
, xl
, 2xl
, 3xl
, 4xl
. Arbitrary breakpoints can be specified through comparison operators >
, >=
, <
, <=
.
To learn more, see the Breakpoints documentation.
Print format and media queries
<div class="border-radius:10@print">...</div>
Master supports media types like print
, screen
, speech
, all
, and other media queries.
To learn more, see the Media Queries documentation.
Dark mode and color schemes
<div class="border-radius:10@dark">...</div>
Master uses the selector html.dark
to support color schemes. Now, you can easily fine-tune your style for the color schemes.
To learn more, see the Color Schemes documentation.