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
/*
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; }
}
/*
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; }
}
/*
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:
To set a border on top of orange
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; }
.bhn { border-right-width: 0; border-left-width: 0; }
.bvn { border-top-width: 0; border-bottom-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; }
.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; }
.bn-ns { border-style: solid; border-width: 0; }
.bhn-ns { border-right-width: 0; border-left-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; }
.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; }
.bn-m { border-style: solid; 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; }
.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; }
.bn-l { border-style: solid; border-width: 0; }
}