MelangeCSS Reference

Current Version: 1.0.0-RC5

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