MelangeCSS Reference

Current Version: 1.0.0-RC4

Borders ( Large Width )

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