tachyons-borders / Themes / Docs / TACHYONS

Skins Hovers Background Size Borders Border Radius Box Shadow Opacity

Borders

There is a base border module that can be extended with the border-width, border-color, border-style modules. By default you don’t need to set a border color. It will just inherit whatever the text color is for that dom node. You can target any side to put a border on ie. top, right, bottom, left.

Examples

Border Base

Border


            <div class="ba"> </div>

Border Top


            <div class="bt"> </div>

Border Right


            <div class="br"> </div>

Border Bottom


            <div class="bb"> </div>

Border Left


            <div class="bl"> </div>

Border Styles

Dashed


            <div class="ba b--dashed"> </div>

Dotted


            <div class="ba b--dotted"> </div>

Solid (default)


            <div class="ba"> </div>

Border Widths

Solid (default)


            <div class="ba bw1"> </div>


            <div class="ba bw2"> </div>


            <div class="ba bw3"> </div>


            <div class="ba bw4"> </div>


            <div class="ba bw5"> </div>

Dotted


            <div class="ba b--dotted bw1"> </div>


            <div class="ba b--dotted bw2"> </div>


            <div class="ba b--dotted bw3"> </div>


            <div class="ba b--dotted bw4"> </div>


            <div class="ba b--dotted bw5"> </div>

Dashed


            <div class="ba b--dashed bw1"> </div>


            <div class="ba b--dashed bw2"> </div>


            <div class="ba b--dashed bw3"> </div>


            <div class="ba b--dashed bw4"> </div>


            <div class="ba b--dashed bw5"> </div>

Border Colors


            <div class="ba b--black"> </div>


            <div class="ba b--near-black"> </div>


            <div class="ba b--dark-gray"> </div>


            <div class="ba b--mid-gray"> </div>


            <div class="ba b--gray"> </div>


            <div class="ba b--silver"> </div>


            <div class="ba b--light-silver"> </div>


            <div class="ba b--light-gray"> </div>


            <div class="ba b--near-white"> </div>


              <div class="ba b--white"> </div>


              <div class="ba b--white-90"> </div>


              <div class="ba b--white-80"> </div>


              <div class="ba b--white-70"> </div>


              <div class="ba b--white-60"> </div>


              <div class="ba b--white-50"> </div>


              <div class="ba b--white-40"> </div>


              <div class="ba b--white-30"> </div>


              <div class="ba b--white-20"> </div>


              <div class="ba b--white-10"> </div>


              <div class="ba b--white-05"> </div>


              <div class="ba b--white-025"> </div>


            <div class="ba b--black"> </div>


            <div class="ba b--black-90"> </div>


            <div class="ba b--black-80"> </div>


            <div class="ba b--black-70"> </div>


            <div class="ba b--black-60"> </div>


            <div class="ba b--black-50"> </div>


            <div class="ba b--black-40"> </div>


            <div class="ba b--black-30"> </div>


            <div class="ba b--black-20"> </div>


            <div class="ba b--black-10"> </div>


            <div class="ba b--black-05"> </div>


            <div class="ba b--black-025"> </div>


  <div class="ba b--dark-red"> </div>


  <div class="ba b--dark-red"> </div>


  <div class="ba b--red"> </div>


  <div class="ba b--orange"> </div>


  <div class="ba b--gold"> </div>


  <div class="ba b--yellow"> </div>


  <div class="ba b--purple"> </div>


  <div class="ba b--light-purple"> </div>


  <div class="ba b--hot-pink"> </div>


  <div class="ba b--dark-pink"> </div>


  <div class="ba b--pink"> </div>


  <div class="ba b--dark-green"> </div>


  <div class="ba b--green"> </div>


  <div class="ba b--navy"> </div>


  <div class="ba b--dark-blue"> </div>


  <div class="ba b--blue"> </div>


  <div class="ba b--light-blue"> </div>


  <div class="ba b--lightest-blue"> </div>


  <div class="ba b--washed-blue"> </div>


  <div class="ba b--washed-green"> </div>


  <div class="ba b--washed-yellow"> </div>


  <div class="ba b--light-pink"> </div>


  <div class="ba b--light-yellow"> </div>


  <div class="ba b--light-red"> </div>

Background Size

Border Radius

Reference

MDN - Border MDN - Border Style MDN - Border Width

tachyons-borders

v3.0.4 227 B

Declarations: 48

Selectors: 24

Max. Specificity Score: 10

Size of Avg. Rule: 2

src/_borders.css


/*

    BORDERS
    Docs: http://tachyons.io/docs/themes/borders/

    Base:
      b = border

    Modifiers:
      a = all
      t = top
      r = right
      b = bottom
      l = left
      n = none

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

*/

  .ba { border-style: solid; border-width: 1px; }
  .bt { border-top-style: solid; border-top-width: 1px; }
  .br { border-right-style: solid; border-right-width: 1px; }
  .bb { border-bottom-style: solid; border-bottom-width: 1px; }
  .bl { border-left-style: solid; border-left-width: 1px; }
  .bn { border-style: none; border-width: 0; }


@media (--breakpoint-not-small) {
  .ba-ns { border-style: solid; border-width: 1px; }
  .bt-ns { border-top-style: solid; border-top-width: 1px; }
  .br-ns { border-right-style: solid; border-right-width: 1px; }
  .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
  .bl-ns { border-left-style: solid; border-left-width: 1px; }
  .bn-ns { border-style: none; border-width: 0; }
}

@media (--breakpoint-medium) {
  .ba-m { border-style: solid; border-width: 1px; }
  .bt-m { border-top-style: solid; border-top-width: 1px; }
  .br-m { border-right-style: solid; border-right-width: 1px; }
  .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
  .bl-m { border-left-style: solid; border-left-width: 1px; }
  .bn-m { border-style: none; border-width: 0; }
}

@media (--breakpoint-large) {
  .ba-l { border-style: solid; border-width: 1px; }
  .bt-l { border-top-style: solid; border-top-width: 1px; }
  .br-l { border-right-style: solid; border-right-width: 1px; }
  .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
  .bl-l { border-left-style: solid; border-left-width: 1px; }
  .bn-l { border-style: none; border-width: 0; }
}

src/_border-style.css


/*

   BORDER STYLES
   Docs: http://tachyons.io/docs/themes/borders/

   Depends on base border module in _borders.css

   Base:
     b = border-style

   Modifiers:
     --none   = none
     --dotted = dotted
     --dashed = dashed
     --solid  = solid

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

 */

.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid {  border-style: solid; }
.b--none {   border-style: none; }

@media (--breakpoint-not-small) {
  .b--dotted-ns { border-style: dotted; }
  .b--dashed-ns { border-style: dashed; }
  .b--solid-ns {  border-style: solid; }
  .b--none-ns {   border-style: none; }
}

@media (--breakpoint-medium) {
  .b--dotted-m { border-style: dotted; }
  .b--dashed-m { border-style: dashed; }
  .b--solid-m {  border-style: solid; }
  .b--none-m {   border-style: none; }
}

@media (--breakpoint-large) {
  .b--dotted-l { border-style: dotted; }
  .b--dashed-l { border-style: dashed; }
  .b--solid-l {  border-style: solid; }
  .b--none-l {   border-style: none; }
}

src/_border-colors.css


/*

   BORDER COLORS
   Docs: http://tachyons.io/docs/themes/borders/

   Border colors can be used to extend the base
   border classes ba,bt,bb,br,bl found in the _borders.css file.

   The base border class by default will set the color of the border
   to that of the current text color. These classes are for the cases
   where you desire for the text and border colors to be different.

   Base:
     b = border

   Modifiers:
   --color-name = each color variable name is also a border color name

*/

.b--black {        border-color: var(--black); }
.b--near-black {   border-color: var(--near-black); }
.b--dark-gray {    border-color: var(--dark-gray); }
.b--mid-gray {     border-color: var(--mid-gray); }
.b--gray {         border-color: var(--gray); }
.b--silver {       border-color: var(--silver); }
.b--light-silver { border-color: var(--light-silver); }
.b--moon-gray {    border-color: var(--moon-gray); }
.b--light-gray {   border-color: var(--light-gray); }
.b--near-white {   border-color: var(--near-white); }
.b--white {        border-color: var(--white); }

.b--white-90 {   border-color: var(--white-90); }
.b--white-80 {   border-color: var(--white-80); }
.b--white-70 {   border-color: var(--white-70); }
.b--white-60 {   border-color: var(--white-60); }
.b--white-50 {   border-color: var(--white-50); }
.b--white-40 {   border-color: var(--white-40); }
.b--white-30 {   border-color: var(--white-30); }
.b--white-20 {   border-color: var(--white-20); }
.b--white-10 {   border-color: var(--white-10); }
.b--white-05 {   border-color: var(--white-05); }
.b--white-025 {   border-color: var(--white-025); }
.b--white-0125 {   border-color: var(--white-0125); }

.b--black-90 {   border-color: var(--black-90); }
.b--black-80 {   border-color: var(--black-80); }
.b--black-70 {   border-color: var(--black-70); }
.b--black-60 {   border-color: var(--black-60); }
.b--black-50 {   border-color: var(--black-50); }
.b--black-40 {   border-color: var(--black-40); }
.b--black-30 {   border-color: var(--black-30); }
.b--black-20 {   border-color: var(--black-20); }
.b--black-10 {   border-color: var(--black-10); }
.b--black-05 {   border-color: var(--black-05); }
.b--black-025 {   border-color: var(--black-025); }
.b--black-0125 {   border-color: var(--black-0125); }

.b--dark-red { border-color: var(--dark-red); }
.b--red { border-color: var(--red); }
.b--light-red { border-color: var(--light-red); }
.b--orange { border-color: var(--orange); }
.b--gold { border-color: var(--gold); }
.b--yellow { border-color: var(--yellow); }
.b--light-yellow { border-color: var(--light-yellow); }
.b--purple { border-color: var(--purple); }
.b--light-purple { border-color: var(--light-purple); }
.b--dark-pink { border-color: var(--dark-pink); }
.b--hot-pink { border-color: var(--hot-pink); }
.b--pink { border-color: var(--pink); }
.b--light-pink { border-color: var(--light-pink); }
.b--dark-green { border-color: var(--dark-green); }
.b--green { border-color: var(--green); }
.b--light-green { border-color: var(--light-green); }
.b--navy { border-color: var(--navy); }
.b--dark-blue { border-color: var(--dark-blue); }
.b--blue { border-color: var(--blue); }
.b--light-blue { border-color: var(--light-blue); }
.b--lightest-blue { border-color: var(--lightest-blue); }
.b--washed-blue { border-color: var(--washed-blue); }
.b--washed-green { border-color: var(--washed-green); }
.b--washed-yellow { border-color: var(--washed-yellow); }
.b--washed-red { border-color: var(--washed-red); }

.b--transparent { border-color: var(--transparent); }
.b--inherit { border-color: inherit; }

src/_border-widths.css


/*

   BORDER WIDTHS
   Docs: http://tachyons.io/docs/themes/borders/

   Base:
     bw = border-width

   Modifiers:
     0 = 0 width border
     1 = 1st step in border-width scale
     2 = 2nd step in border-width scale
     3 = 3rd step in border-width scale
     4 = 4th step in border-width scale
     5 = 5th step in border-width scale

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

*/

.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }

/* Resets */
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }

@media (--breakpoint-not-small) {
  .bw0-ns { border-width: 0; }
  .bw1-ns { border-width: .125rem; }
  .bw2-ns { border-width: .25rem; }
  .bw3-ns { border-width: .5rem; }
  .bw4-ns { border-width: 1rem; }
  .bw5-ns { border-width: 2rem; }
  .bt-0-ns { border-top-width: 0; }
  .br-0-ns { border-right-width: 0; }
  .bb-0-ns { border-bottom-width: 0; }
  .bl-0-ns { border-left-width: 0; }
}

@media (--breakpoint-medium) {
  .bw0-m { border-width: 0; }
  .bw1-m { border-width: .125rem; }
  .bw2-m { border-width: .25rem; }
  .bw3-m { border-width: .5rem; }
  .bw4-m { border-width: 1rem; }
  .bw5-m { border-width: 2rem; }
  .bt-0-m { border-top-width: 0; }
  .br-0-m { border-right-width: 0; }
  .bb-0-m { border-bottom-width: 0; }
  .bl-0-m { border-left-width: 0; }
}

@media (--breakpoint-large) {
  .bw0-l { border-width: 0; }
  .bw1-l { border-width: .125rem; }
  .bw2-l { border-width: .25rem; }
  .bw3-l { border-width: .5rem; }
  .bw4-l { border-width: 1rem; }
  .bw5-l { border-width: 2rem; }
  .bt-0-l { border-top-width: 0; }
  .br-0-l { border-right-width: 0; }
  .bb-0-l { border-bottom-width: 0; }
  .bl-0-l { border-left-width: 0; }
}

Overview of Tachyons

Table of Styles Table of Properties

Typography

Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families Avenir Next Helvetica Roboto San Francisco System Sans-Serif Athelas Baskerville Garamond Georgia System Serif

Layout

Debugging Debug with a Grid Basic Grid Flexbox Box Sizing Spacing Floats Clearfix Display Widths Max Widths Heights Position

Theming

Skins Skins animations Hovers Background Size Borders Border Radius Box Shadow Opacity

Elements

Images Links Lists Forms Tables

Borders

Examples

Border Base

Border

Border Top

Border Right

Border Bottom

Border Left

Border Styles

Dashed

Dotted

Solid (default)

Border Widths

Solid (default)

Dotted

Dashed

Border Colors

Previous

Next

Reference

Overview of Tachyons

Typography

Layout

Theming

Elements