MelangeCSS Reference

Current Version: 1.0.0-RC5

Borders ( High Contrast )†

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