Examples
Border Radius
1st step in border-radius scale
2nd step in border-radius scale
3rd step in border-radius scale
4th step in border-radius scale
5th step in border-radius scale
circle with fixed height & width
Reference
MDN - Border Radius
/*
BORDER RADIUS
Base:
br = border-radius
Modifiers:
n = none
1 = 1st step in scale
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
5 = 5th step in scale
circ = circle
-100 = 100%
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.brn { border-radius: 0; }
.br1 { border-radius: .125rem; }
.br2 { border-radius: .25rem; }
.br3 { border-radius: .5rem; }
.br4 { border-radius: 1rem; }
.br5 { border-radius: 2rem; }
.br-100 { border-radius: 100%; }
@media (--breakpoint-not-small) {
.brn-ns { border-radius: 0; }
.br1-ns { border-radius: .125rem; }
.br2-ns { border-radius: .25rem; }
.br3-ns { border-radius: .5rem; }
.br4-ns { border-radius: 1rem; }
.br5-ns { border-radius: 2rem; }
.br-100-ns { border-radius: 100%; }
}
@media (--breakpoint-medium) {
.brn-m { border-radius: 0; }
.br1-m { border-radius: .125rem; }
.br2-m { border-radius: .25rem; }
.br3-m { border-radius: .5rem; }
.br4-m { border-radius: 1rem; }
.br5-m { border-radius: 2rem; }
.br-100-m { border-radius: 100%; }
}
@media (--breakpoint-large) {
.brn-l { border-radius: 0; }
.br1-l { border-radius: .125rem; }
.br2-l { border-radius: .25rem; }
.br3-l { border-radius: .5rem; }
.br4-l { border-radius: 1rem; }
.br5-l { border-radius: 2rem; }
.br-100-l { border-radius: 100%; }
}