BrutCSS Reference Documentation

Borders Classes

Borders.

Borders

Styles to add borders in various locations. By default, these will add borders that are 1px in width, but you can use the Border Widths styles to adjust.

.ba

.ba {
  border-style: solid;
  border-width: 1px;
}

.bl

.bl {
  border-left-style: solid;
  border-left-width: 1px;
}

.br

.br {
  border-right-style: solid;
  border-right-width: 1px;
}

.bt

.bt {
  border-top-style: solid;
  border-top-width: 1px;
}

.bb

.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.bn

.bn {
  border-style: none;
  border-width: 0;
}

.collapse

.collapse {
  border-collapse: collapse;
  border-spacing: 0;
}

Collapse borders and remove spacing. This is most useful on <table> tags to take back a bit of control on how everything renders.

Border Radius

Border radius. These are based on Border Widths and provide a six-step scale, along with a 100% class and a “pill” class to create a lozenge-type border.

See Also

.br-0

.br-0 {
  border-radius: 0;
}

.br-1

.br-1 {
  border-radius: var(--bw-1);
}

.br-2

.br-2 {
  border-radius: var(--bw-2);
}

.br-3

.br-3 {
  border-radius: var(--bw-3);
}

.br-4

.br-4 {
  border-radius: var(--bw-4);
}

.br-5

.br-5 {
  border-radius: var(--bw-5);
}

.br-100

.br-100 {
  border-radius: 100%;
}

.br-pill

.br-pill {
  border-radius: 999px;
}

Border Bottom Radius

Border bottom radius.

See Also

.br-bottom-0

.br-bottom-0 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.br-bottom-1

.br-bottom-1 {
  border-bottom-left-radius: var(--bw-1);
  border-bottom-right-radius: var(--bw-1);
}

.br-bottom-2

.br-bottom-2 {
  border-bottom-left-radius: var(--bw-2);
  border-bottom-right-radius: var(--bw-2);
}

.br-bottom-3

.br-bottom-3 {
  border-bottom-left-radius: var(--bw-3);
  border-bottom-right-radius: var(--bw-3);
}

.br-bottom-4

.br-bottom-4 {
  border-bottom-left-radius: var(--bw-4);
  border-bottom-right-radius: var(--bw-4);
}

.br-bottom-5

.br-bottom-5 {
  border-bottom-left-radius: var(--bw-5);
  border-bottom-right-radius: var(--bw-5);
}

.br-bottom-100

.br-bottom-100 {
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

.br-bottom-pill

.br-bottom-pill {
  border-bottom-left-radius: 999px;
  border-bottom-right-radius: 999px;
}

Border Top Radius

Border top radius.

See Also

.br-top-0

.br-top-0 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.br-top-1

.br-top-1 {
  border-top-left-radius: var(--bw-1);
  border-top-right-radius: var(--bw-1);
}

.br-top-2

.br-top-2 {
  border-top-left-radius: var(--bw-2);
  border-top-right-radius: var(--bw-2);
}

.br-top-3

.br-top-3 {
  border-top-left-radius: var(--bw-3);
  border-top-right-radius: var(--bw-3);
}

.br-top-4

.br-top-4 {
  border-top-left-radius: var(--bw-4);
  border-top-right-radius: var(--bw-4);
}

.br-top-5

.br-top-5 {
  border-top-left-radius: var(--bw-5);
  border-top-right-radius: var(--bw-5);
}

.br-top-100

.br-top-100 {
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}

.br-top-pill

.br-top-pill {
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
}

Border Left Radius

Border left radius.

See Also

.br-left-0

.br-left-0 {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.br-left-1

.br-left-1 {
  border-bottom-left-radius: var(--bw-1);
  border-top-left-radius: var(--bw-1);
}

.br-left-2

.br-left-2 {
  border-bottom-left-radius: var(--bw-2);
  border-top-left-radius: var(--bw-2);
}

.br-left-3

.br-left-3 {
  border-bottom-left-radius: var(--bw-3);
  border-top-left-radius: var(--bw-3);
}

.br-left-4

.br-left-4 {
  border-bottom-left-radius: var(--bw-4);
  border-top-left-radius: var(--bw-4);
}

.br-left-5

.br-left-5 {
  border-bottom-left-radius: var(--bw-5);
  border-top-left-radius: var(--bw-5);
}

.br-left-100

.br-left-100 {
  border-bottom-left-radius: 100%;
  border-top-left-radius: 100%;
}

.br-left-pill

.br-left-pill {
  border-bottom-left-radius: 999px;
  border-top-left-radius: 999px;
}

Border Right Radius

Border right radius.

See Also

.br-right-0

.br-right-0 {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.br-right-1

.br-right-1 {
  border-bottom-right-radius: var(--bw-1);
  border-top-right-radius: var(--bw-1);
}

.br-right-2

.br-right-2 {
  border-bottom-right-radius: var(--bw-2);
  border-top-right-radius: var(--bw-2);
}

.br-right-3

.br-right-3 {
  border-bottom-right-radius: var(--bw-3);
  border-top-right-radius: var(--bw-3);
}

.br-right-4

.br-right-4 {
  border-bottom-right-radius: var(--bw-4);
  border-top-right-radius: var(--bw-4);
}

.br-right-5

.br-right-5 {
  border-bottom-right-radius: var(--bw-5);
  border-top-right-radius: var(--bw-5);
}

.br-right-100

.br-right-100 {
  border-bottom-right-radius: 100%;
  border-top-right-radius: 100%;
}

.br-right-pill

.br-right-pill {
  border-bottom-right-radius: 999px;
  border-top-right-radius: 999px;
}

Border Top Right Radius

Border top-right radius.

See Also

.br-tr-0

.br-tr-0 {
  border-top-right-radius: 0;
}

.br-tr-1

.br-tr-1 {
  border-top-right-radius: var(--bw-1);
}

.br-tr-2

.br-tr-2 {
  border-top-right-radius: var(--bw-2);
}

.br-tr-3

.br-tr-3 {
  border-top-right-radius: var(--bw-3);
}

.br-tr-4

.br-tr-4 {
  border-top-right-radius: var(--bw-4);
}

.br-tr-5

.br-tr-5 {
  border-top-right-radius: var(--bw-5);
}

.br-tr-100

.br-tr-100 {
  border-top-right-radius: 100%;
}

.br-tr-pill

.br-tr-pill {
  border-top-right-radius: 999px;
}

Border Bottom Right Radius

Border bottom-right radius.

See Also

.br-br-0

.br-br-0 {
  border-bottom-right-radius: 0;
}

.br-br-1

.br-br-1 {
  border-bottom-right-radius: var(--bw-1);
}

.br-br-2

.br-br-2 {
  border-bottom-right-radius: var(--bw-2);
}

.br-br-3

.br-br-3 {
  border-bottom-right-radius: var(--bw-3);
}

.br-br-4

.br-br-4 {
  border-bottom-right-radius: var(--bw-4);
}

.br-br-5

.br-br-5 {
  border-bottom-right-radius: var(--bw-5);
}

.br-br-100

.br-br-100 {
  border-bottom-right-radius: 100%;
}

.br-br-pill

.br-br-pill {
  border-bottom-right-radius: 999px;
}

Border Top Left Radius

Border top-left radius.

See Also

.br-tl-0

.br-tl-0 {
  border-top-left-radius: 0;
}

.br-tl-1

.br-tl-1 {
  border-top-left-radius: var(--bw-1);
}

.br-tl-2

.br-tl-2 {
  border-top-left-radius: var(--bw-2);
}

.br-tl-3

.br-tl-3 {
  border-top-left-radius: var(--bw-3);
}

.br-tl-4

.br-tl-4 {
  border-top-left-radius: var(--bw-4);
}

.br-tl-5

.br-tl-5 {
  border-top-left-radius: var(--bw-5);
}

.br-tl-100

.br-tl-100 {
  border-top-left-radius: 100%;
}

.br-tl-pill

.br-tl-pill {
  border-top-left-radius: 999px;
}

Border Bottom Left Radius

Border bottom-left radius.

See Also

.br-bl-0

.br-bl-0 {
  border-bottom-left-radius: 0;
}

.br-bl-1

.br-bl-1 {
  border-bottom-left-radius: var(--bw-1);
}

.br-bl-2

.br-bl-2 {
  border-bottom-left-radius: var(--bw-2);
}

.br-bl-3

.br-bl-3 {
  border-bottom-left-radius: var(--bw-3);
}

.br-bl-4

.br-bl-4 {
  border-bottom-left-radius: var(--bw-4);
}

.br-bl-5

.br-bl-5 {
  border-bottom-left-radius: var(--bw-5);
}

.br-bl-100

.br-bl-100 {
  border-bottom-left-radius: 100%;
}

.br-bl-pill

.br-bl-pill {
  border-bottom-left-radius: 999px;
}

.bs-dotted

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

.bs-dashed

.bs-dashed {
  border-style: dashed;
}

.bs-solid

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

.bs-none

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

.bls-dotted

.bls-dotted {
  border-left-style: dotted;
}

.bls-dashed

.bls-dashed {
  border-left-style: dashed;
}

.bls-solid

.bls-solid {
  border-left-style: solid;
}

.bls-none

.bls-none {
  border-left-style: none;
}

.brs-dotted

.brs-dotted {
  border-right-style: dotted;
}

.brs-dashed

.brs-dashed {
  border-right-style: dashed;
}

.brs-solid

.brs-solid {
  border-right-style: solid;
}

.brs-none

.brs-none {
  border-right-style: none;
}

.bts-dotted

.bts-dotted {
  border-top-style: dotted;
}

.bts-dashed

.bts-dashed {
  border-top-style: dashed;
}

.bts-solid

.bts-solid {
  border-top-style: solid;
}

.bts-none

.bts-none {
  border-top-style: none;
}

.bbs-dotted

.bbs-dotted {
  border-bottom-style: dotted;
}

.bbs-dashed

.bbs-dashed {
  border-bottom-style: dashed;
}

.bbs-solid

.bbs-solid {
  border-bottom-style: solid;
}

.bbs-none

.bbs-none {
  border-bottom-style: none;
}

Border Widths

Border widths. This provides a six-step scale.

See Also

.bw-0

.bw-0 {
  border-width: 0;
}

.bw-1

.bw-1 {
  border-width: var(--bw-1);
}

.bw-2

.bw-2 {
  border-width: var(--bw-2);
}

.bw-3

.bw-3 {
  border-width: var(--bw-3);
}

.bw-4

.bw-4 {
  border-width: var(--bw-4);
}

.bw-5

.bw-5 {
  border-width: var(--bw-5);
}

Border Left Width

Border left width.

See Also

.blw-0

.blw-0 {
  border-left-width: 0;
}

.blw-1

.blw-1 {
  border-left-width: var(--bw-1);
}

.blw-2

.blw-2 {
  border-left-width: var(--bw-2);
}

.blw-3

.blw-3 {
  border-left-width: var(--bw-3);
}

.blw-4

.blw-4 {
  border-left-width: var(--bw-4);
}

.blw-5

.blw-5 {
  border-left-width: var(--bw-5);
}

Border Right Width

Border right width.

See Also

.brw-0

.brw-0 {
  border-right-width: 0;
}

.brw-1

.brw-1 {
  border-right-width: var(--bw-1);
}

.brw-2

.brw-2 {
  border-right-width: var(--bw-2);
}

.brw-3

.brw-3 {
  border-right-width: var(--bw-3);
}

.brw-4

.brw-4 {
  border-right-width: var(--bw-4);
}

.brw-5

.brw-5 {
  border-right-width: var(--bw-5);
}

Border Top Width

Border top width.

See Also

.btw-0

.btw-0 {
  border-top-width: 0;
}

.btw-1

.btw-1 {
  border-top-width: var(--bw-1);
}

.btw-2

.btw-2 {
  border-top-width: var(--bw-2);
}

.btw-3

.btw-3 {
  border-top-width: var(--bw-3);
}

.btw-4

.btw-4 {
  border-top-width: var(--bw-4);
}

.btw-5

.btw-5 {
  border-top-width: var(--bw-5);
}

Border Bottom Width

Border bottom width.

See Also

.bbw-0

.bbw-0 {
  border-bottom-width: 0;
}

.bbw-1

.bbw-1 {
  border-bottom-width: var(--bw-1);
}

.bbw-2

.bbw-2 {
  border-bottom-width: var(--bw-2);
}

.bbw-3

.bbw-3 {
  border-bottom-width: var(--bw-3);
}

.bbw-4

.bbw-4 {
  border-bottom-width: var(--bw-4);
}

.bbw-5

.bbw-5 {
  border-bottom-width: var(--bw-5);
}

On this Page