MelangeCSS Reference

Current Version: 1.0.0-RC5

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