Tachyons
v4.12.0
Skins Hovers Background Size Borders Border Radius Box Shadow Opacity

Border Radius

There is a four 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

.br0
.br1
.br2
.br3
.br4
.br-pill

Combine .br-100 with a fixed height and width to make a circle

.br-100

Previous

Borders

Next

Images

Reference

MDN - Border Radius

tachyons-border-radius

v5.1.3 336 B
Declarations
56
Selectors
52
Max. Specificity Score
10
Size of Avg. Rule
1.1666666666666667
src/_border-radius.css 

/*

   BORDER RADIUS
   Docs: http://tachyons.io/docs/themes/border-radius/

   Base:
     br   = border-radius

   Modifiers:
     0    = 0/none
     1    = 1st step in scale
     2    = 2nd step in scale
     3    = 3rd step in scale
     4    = 4th step in scale

   Literal values:
     -100 = 100%
     -pill = 9999px

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

  .br0 {        border-radius: 0; }
  .br1 {        border-radius: .125rem; }
  .br2 {        border-radius: .25rem; }
  .br3 {        border-radius: .5rem; }
  .br4 {        border-radius: 1rem; }
  .br-100 {     border-radius: 100%; }
  .br-pill {    border-radius: 9999px; }
  .br--bottom {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .br--top {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br--right {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .br--left {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }

@media (--breakpoint-not-small) {
  .br0-ns {     border-radius: 0; }
  .br1-ns {     border-radius: .125rem; }
  .br2-ns {     border-radius: .25rem; }
  .br3-ns {     border-radius: .5rem; }
  .br4-ns {     border-radius: 1rem; }
  .br-100-ns {  border-radius: 100%; }
  .br-pill-ns { border-radius: 9999px; }
  .br--bottom-ns {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .br--top-ns {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br--right-ns {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .br--left-ns {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
}

@media (--breakpoint-medium) {
  .br0-m {     border-radius: 0; }
  .br1-m {     border-radius: .125rem; }
  .br2-m {     border-radius: .25rem; }
  .br3-m {     border-radius: .5rem; }
  .br4-m {     border-radius: 1rem; }
  .br-100-m {  border-radius: 100%; }
  .br-pill-m { border-radius: 9999px; }
  .br--bottom-m {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .br--top-m {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br--right-m {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .br--left-m {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
}

@media (--breakpoint-large) {
  .br0-l {     border-radius: 0; }
  .br1-l {     border-radius: .125rem; }
  .br2-l {     border-radius: .25rem; }
  .br3-l {     border-radius: .5rem; }
  .br4-l {     border-radius: 1rem; }
  .br-100-l {  border-radius: 100%; }
  .br-pill-l { border-radius: 9999px; }
  .br--bottom-l {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
  }
  .br--top-l {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
  }
  .br--right-l {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
  }
  .br--left-l {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
}