Tachyons

Docs

/

Themes

/

Borders

Version
<%= moduleVersion %>
Filesize
<%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

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

1px solid border on all sides 1px solid border on top 1px solid border on the right 1px solid border on the bottom 1px solid border on the bottom

Border Styles

Dotted Solid

Border Widths - Solid

border-width: .125rem border-width: .25rem border-width: .5rem border-width: 1rem border-width: 2rem

Border Widths - Dotted

border-width: .125rem border-width: .25rem border-width: .5rem border-width: 1rem border-width: 2rem
src/_borders.css

/*

   BORDER BASE

   Use border-base in combination with setting text color
   or by using extensions from border-color module.

   Examples:
   To set a border of blue on all sides:
   
Element Content
To set a border on top of orange
Element Content
Base: b = border Modifiers: n = none, no border-style or border-width a = all t = top r = right b = bottom l = left Media Query Extensions: -ns = not-small -m = medium -l = large */ /* The extra `.bn` is required to boost the specificity, which is needed * sometimes if you are setting the border to 0. */ .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: solid; border-width: 0; } .bda { border-style: dotted; border-width: 1px; } .bdt { border-top-style: dotted; border-top-width: 1px; } .bdr { border-right-style: dotted; border-right-width: 1px; } .bdb { border-bottom-style: dotted; border-bottom-width: 1px; } .bdl { border-left-style: dotted; border-left-width: 1px; } @media (--breakpoint-not-small) { .bn-ns { border-style: solid; border-width: 0; } .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; } .bda-ns { border-style: dotted; border-width: 1px; } .bdt-ns { border-top-style: dotted; border-top-width: 1px; } .bdr-ns { border-right-style: dotted; border-right-width: 1px; } .bdb-ns { border-bottom-style: dotted; border-bottom-width: 1px; } .bdl-ns { border-left-style: dotted; border-left-width: 1px; } } @media (--breakpoint-medium) { .bn-m { border-style: solid; border-width: 0; } .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; } .bda-m { border-style: dotted; border-width: 1px; } .bdt-m { border-top-style: dotted; border-top-width: 1px; } .bdr-m { border-right-style: dotted; border-right-width: 1px; } .bdb-m { border-bottom-style: dotted; border-bottom-width: 1px; } .bdl-m { border-left-style: dotted; border-left-width: 1px; } } @media (--breakpoint-large) { .bn-l { border-style: solid; border-width: 0; } .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; } .bda-l { border-style: dotted; border-width: 1px; } .bdt-l { border-top-style: dotted; border-top-width: 1px; } .bdr-l { border-right-style: dotted; border-right-width: 1px; } .bdb-l { border-bottom-style: dotted; border-bottom-width: 1px; } .bdl-l { border-left-style: dotted; border-left-width: 1px; } }
src/_border-style.css


/*

   BORDER STYLES

   Base:
     bs = border-style

   Modifiers:
     none   = none
     dotted = dotted
     solid  = solid

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

 */

.bs-none {   border-style: none; }
.bs-dotted { border-style: dotted; }
.bs-solid {  border-style: solid; }

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

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

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

src/_border-widths.css

<%= srcCSS  %>

<%= navDocs %>
<%= siteFooter %>