Tachyons

Docs

/

Themes

/

Border Radius

Version
2.1.0
Filesize
206 B
Declarations
28
Selectors
28
Max. Specificity Score
10
Size of Avg. Rule
1

There is a five step scale for border radius in addition to a utility that sets border radius to 100%, which when combined with an explicit height and width will produce a circle.

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

Previous

Borders

Next

Debugging
src/_border-radius.css

/*

   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%; }
}


Docs

General

Debugging Images