MelangeCSS Reference

Current Version: 1.0.0-RC5

Borders

Like the spacing group, borders can benefit from a stepped scale of sizes. These sizes don't relate to the spacings, but are internally consistent. Border widths and radiuses should produce harmonic designs for most of your needs.

Properties

Border Radius
br*
Border Radius all
br-0 
.br-0 {
  border-radius: 0;
}
.br-0
br-1 
.br-1 {
  border-radius: var(--bw-1);
}
.br-1
br-2 
.br-2 {
  border-radius: var(--bw-2);
}
.br-2
br-3 
.br-3 {
  border-radius: var(--bw-3);
}
.br-3
br-4 
.br-4 {
  border-radius: var(--bw-4);
}
.br-4
br-5 
.br-5 {
  border-radius: var(--bw-5);
}
.br-5
br-100 
.br-100 {
  border-radius: 100%;
}
.br-100
br-pill 
.br-pill {
  border-radius: 999px;
}
.br-pill
br-bottom*
Border Radius bottom
br-bottom-0 
.br-bottom-0 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.br-bottom-0
br-bottom-1 
.br-bottom-1 {
  border-bottom-left-radius: var(--bw-1);
  border-bottom-right-radius: var(--bw-1);
}
.br-bottom-1
br-bottom-2 
.br-bottom-2 {
  border-bottom-left-radius: var(--bw-2);
  border-bottom-right-radius: var(--bw-2);
}
.br-bottom-2
br-bottom-3 
.br-bottom-3 {
  border-bottom-left-radius: var(--bw-3);
  border-bottom-right-radius: var(--bw-3);
}
.br-bottom-3
br-bottom-4 
.br-bottom-4 {
  border-bottom-left-radius: var(--bw-4);
  border-bottom-right-radius: var(--bw-4);
}
.br-bottom-4
br-bottom-5 
.br-bottom-5 {
  border-bottom-left-radius: var(--bw-5);
  border-bottom-right-radius: var(--bw-5);
}
.br-bottom-5
br-bottom-100 
.br-bottom-100 {
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}
.br-bottom-100
br-bottom-pill 
.br-bottom-pill {
  border-bottom-left-radius: 999px;
  border-bottom-right-radius: 999px;
}
.br-bottom-pill
br-top*
Border Radius top
br-top-0 
.br-top-0 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.br-top-0
br-top-1 
.br-top-1 {
  border-top-left-radius: var(--bw-1);
  border-top-right-radius: var(--bw-1);
}
.br-top-1
br-top-2 
.br-top-2 {
  border-top-left-radius: var(--bw-2);
  border-top-right-radius: var(--bw-2);
}
.br-top-2
br-top-3 
.br-top-3 {
  border-top-left-radius: var(--bw-3);
  border-top-right-radius: var(--bw-3);
}
.br-top-3
br-top-4 
.br-top-4 {
  border-top-left-radius: var(--bw-4);
  border-top-right-radius: var(--bw-4);
}
.br-top-4
br-top-5 
.br-top-5 {
  border-top-left-radius: var(--bw-5);
  border-top-right-radius: var(--bw-5);
}
.br-top-5
br-top-100 
.br-top-100 {
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}
.br-top-100
br-top-pill 
.br-top-pill {
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
}
.br-top-pill
br-left*
Border Radius left
br-left-0 
.br-left-0 {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.br-left-0
br-left-1 
.br-left-1 {
  border-bottom-left-radius: var(--bw-1);
  border-top-left-radius: var(--bw-1);
}
.br-left-1
br-left-2 
.br-left-2 {
  border-bottom-left-radius: var(--bw-2);
  border-top-left-radius: var(--bw-2);
}
.br-left-2
br-left-3 
.br-left-3 {
  border-bottom-left-radius: var(--bw-3);
  border-top-left-radius: var(--bw-3);
}
.br-left-3
br-left-4 
.br-left-4 {
  border-bottom-left-radius: var(--bw-4);
  border-top-left-radius: var(--bw-4);
}
.br-left-4
br-left-5 
.br-left-5 {
  border-bottom-left-radius: var(--bw-5);
  border-top-left-radius: var(--bw-5);
}
.br-left-5
br-left-100 
.br-left-100 {
  border-bottom-left-radius: 100%;
  border-top-left-radius: 100%;
}
.br-left-100
br-left-pill 
.br-left-pill {
  border-bottom-left-radius: 999px;
  border-top-left-radius: 999px;
}
.br-left-pill
br-right*
Border Radius right
br-right-0 
.br-right-0 {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.br-right-0
br-right-1 
.br-right-1 {
  border-bottom-right-radius: var(--bw-1);
  border-top-right-radius: var(--bw-1);
}
.br-right-1
br-right-2 
.br-right-2 {
  border-bottom-right-radius: var(--bw-2);
  border-top-right-radius: var(--bw-2);
}
.br-right-2
br-right-3 
.br-right-3 {
  border-bottom-right-radius: var(--bw-3);
  border-top-right-radius: var(--bw-3);
}
.br-right-3
br-right-4 
.br-right-4 {
  border-bottom-right-radius: var(--bw-4);
  border-top-right-radius: var(--bw-4);
}
.br-right-4
br-right-5 
.br-right-5 {
  border-bottom-right-radius: var(--bw-5);
  border-top-right-radius: var(--bw-5);
}
.br-right-5
br-right-100 
.br-right-100 {
  border-bottom-right-radius: 100%;
  border-top-right-radius: 100%;
}
.br-right-100
br-right-pill 
.br-right-pill {
  border-bottom-right-radius: 999px;
  border-top-right-radius: 999px;
}
.br-right-pill
br-tr*
Border Radius top right
br-tr-0 
.br-tr-0 {
  border-top-right-radius: 0;
}
.br-tr-0
br-tr-1 
.br-tr-1 {
  border-top-right-radius: var(--bw-1);
}
.br-tr-1
br-tr-2 
.br-tr-2 {
  border-top-right-radius: var(--bw-2);
}
.br-tr-2
br-tr-3 
.br-tr-3 {
  border-top-right-radius: var(--bw-3);
}
.br-tr-3
br-tr-4 
.br-tr-4 {
  border-top-right-radius: var(--bw-4);
}
.br-tr-4
br-tr-5 
.br-tr-5 {
  border-top-right-radius: var(--bw-5);
}
.br-tr-5
br-tr-100 
.br-tr-100 {
  border-top-right-radius: 100%;
}
.br-tr-100
br-tr-pill 
.br-tr-pill {
  border-top-right-radius: 999px;
}
.br-tr-pill
br-br*
Border Radius bottom right
br-br-0 
.br-br-0 {
  border-bottom-right-radius: 0;
}
.br-br-0
br-br-1 
.br-br-1 {
  border-bottom-right-radius: var(--bw-1);
}
.br-br-1
br-br-2 
.br-br-2 {
  border-bottom-right-radius: var(--bw-2);
}
.br-br-2
br-br-3 
.br-br-3 {
  border-bottom-right-radius: var(--bw-3);
}
.br-br-3
br-br-4 
.br-br-4 {
  border-bottom-right-radius: var(--bw-4);
}
.br-br-4
br-br-5 
.br-br-5 {
  border-bottom-right-radius: var(--bw-5);
}
.br-br-5
br-br-100 
.br-br-100 {
  border-bottom-right-radius: 100%;
}
.br-br-100
br-br-pill 
.br-br-pill {
  border-bottom-right-radius: 999px;
}
.br-br-pill
br-tl*
Border Radius top left
br-tl-0 
.br-tl-0 {
  border-top-left-radius: 0;
}
.br-tl-0
br-tl-1 
.br-tl-1 {
  border-top-left-radius: var(--bw-1);
}
.br-tl-1
br-tl-2 
.br-tl-2 {
  border-top-left-radius: var(--bw-2);
}
.br-tl-2
br-tl-3 
.br-tl-3 {
  border-top-left-radius: var(--bw-3);
}
.br-tl-3
br-tl-4 
.br-tl-4 {
  border-top-left-radius: var(--bw-4);
}
.br-tl-4
br-tl-5 
.br-tl-5 {
  border-top-left-radius: var(--bw-5);
}
.br-tl-5
br-tl-100 
.br-tl-100 {
  border-top-left-radius: 100%;
}
.br-tl-100
br-tl-pill 
.br-tl-pill {
  border-top-left-radius: 999px;
}
.br-tl-pill
br-bl*
Border Radius bottom left
br-bl-0 
.br-bl-0 {
  border-bottom-left-radius: 0;
}
.br-bl-0
br-bl-1 
.br-bl-1 {
  border-bottom-left-radius: var(--bw-1);
}
.br-bl-1
br-bl-2 
.br-bl-2 {
  border-bottom-left-radius: var(--bw-2);
}
.br-bl-2
br-bl-3 
.br-bl-3 {
  border-bottom-left-radius: var(--bw-3);
}
.br-bl-3
br-bl-4 
.br-bl-4 {
  border-bottom-left-radius: var(--bw-4);
}
.br-bl-4
br-bl-5 
.br-bl-5 {
  border-bottom-left-radius: var(--bw-5);
}
.br-bl-5
br-bl-100 
.br-bl-100 {
  border-bottom-left-radius: 100%;
}
.br-bl-100
br-bl-pill 
.br-bl-pill {
  border-bottom-left-radius: 999px;
}
.br-bl-pill
Border Styles
bs*
Border Styles all
bs-dotted 
.bs-dotted {
  border-style: dotted;
}
.bs-dotted
bs-dashed 
.bs-dashed {
  border-style: dashed;
}
.bs-dashed
bs-solid 
.bs-solid {
  border-style: solid;
}
.bs-solid
bs-none 
.bs-none {
  border-style: none;
}
.bs-none
bls*
Border Styles left
bls-dotted 
.bls-dotted {
  border-left-style: dotted;
}
.bls-dotted
bls-dashed 
.bls-dashed {
  border-left-style: dashed;
}
.bls-dashed
bls-solid 
.bls-solid {
  border-left-style: solid;
}
.bls-solid
bls-none 
.bls-none {
  border-left-style: none;
}
.bls-none
brs*
Border Styles right
brs-dotted 
.brs-dotted {
  border-right-style: dotted;
}
.brs-dotted
brs-dashed 
.brs-dashed {
  border-right-style: dashed;
}
.brs-dashed
brs-solid 
.brs-solid {
  border-right-style: solid;
}
.brs-solid
brs-none 
.brs-none {
  border-right-style: none;
}
.brs-none
bts*
Border Styles top
bts-dotted 
.bts-dotted {
  border-top-style: dotted;
}
.bts-dotted
bts-dashed 
.bts-dashed {
  border-top-style: dashed;
}
.bts-dashed
bts-solid 
.bts-solid {
  border-top-style: solid;
}
.bts-solid
bts-none 
.bts-none {
  border-top-style: none;
}
.bts-none
bbs*
Border Styles bottom
bbs-dotted 
.bbs-dotted {
  border-bottom-style: dotted;
}
.bbs-dotted
bbs-dashed 
.bbs-dashed {
  border-bottom-style: dashed;
}
.bbs-dashed
bbs-solid 
.bbs-solid {
  border-bottom-style: solid;
}
.bbs-solid
bbs-none 
.bbs-none {
  border-bottom-style: none;
}
.bbs-none
Border Widths
bw*
Border Widths all
bw-0 
.bw-0 {
  border-width: 0;
}
.bw-0
bw-1 
.bw-1 {
  border-width: var(--bw-1);
}
.bw-1
bw-2 
.bw-2 {
  border-width: var(--bw-2);
}
.bw-2
bw-3 
.bw-3 {
  border-width: var(--bw-3);
}
.bw-3
bw-4 
.bw-4 {
  border-width: var(--bw-4);
}
.bw-4
bw-5 
.bw-5 {
  border-width: var(--bw-5);
}
.bw-5
blw*
Border Widths left
blw-0 
.blw-0 {
  border-left-width: 0;
}
.blw-0
blw-1 
.blw-1 {
  border-left-width: var(--bw-1);
}
.blw-1
blw-2 
.blw-2 {
  border-left-width: var(--bw-2);
}
.blw-2
blw-3 
.blw-3 {
  border-left-width: var(--bw-3);
}
.blw-3
blw-4 
.blw-4 {
  border-left-width: var(--bw-4);
}
.blw-4
blw-5 
.blw-5 {
  border-left-width: var(--bw-5);
}
.blw-5
brw*
Border Widths right
brw-0 
.brw-0 {
  border-right-width: 0;
}
.brw-0
brw-1 
.brw-1 {
  border-right-width: var(--bw-1);
}
.brw-1
brw-2 
.brw-2 {
  border-right-width: var(--bw-2);
}
.brw-2
brw-3 
.brw-3 {
  border-right-width: var(--bw-3);
}
.brw-3
brw-4 
.brw-4 {
  border-right-width: var(--bw-4);
}
.brw-4
brw-5 
.brw-5 {
  border-right-width: var(--bw-5);
}
.brw-5
btw*
Border Widths top
btw-0 
.btw-0 {
  border-top-width: 0;
}
.btw-0
btw-1 
.btw-1 {
  border-top-width: var(--bw-1);
}
.btw-1
btw-2 
.btw-2 {
  border-top-width: var(--bw-2);
}
.btw-2
btw-3 
.btw-3 {
  border-top-width: var(--bw-3);
}
.btw-3
btw-4 
.btw-4 {
  border-top-width: var(--bw-4);
}
.btw-4
btw-5 
.btw-5 {
  border-top-width: var(--bw-5);
}
.btw-5
bbw*
Border Widths bottom
bbw-0 
.bbw-0 {
  border-bottom-width: 0;
}
.bbw-0
bbw-1 
.bbw-1 {
  border-bottom-width: var(--bw-1);
}
.bbw-1
bbw-2 
.bbw-2 {
  border-bottom-width: var(--bw-2);
}
.bbw-2
bbw-3 
.bbw-3 {
  border-bottom-width: var(--bw-3);
}
.bbw-3
bbw-4 
.bbw-4 {
  border-bottom-width: var(--bw-4);
}
.bbw-4
bbw-5 
.bbw-5 {
  border-bottom-width: var(--bw-5);
}
.bbw-5
Borders
ba
Borders all
 
.ba {
  border-style: solid;
  border-width: 1px;
}
.ba
bl
Borders left
 
.bl {
  border-left-style: solid;
  border-left-width: 1px;
}
.bl
br
Borders right
 
.br {
  border-right-style: solid;
  border-right-width: 1px;
}
.br
bt
Borders top
 
.bt {
  border-top-style: solid;
  border-top-width: 1px;
}
.bt
bb
Borders bottom
 
.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.bb
bn
Borders none
 
.bn {
  border-style: none;
  border-width: 0;
}
.bn