Dashed line

all thin width

• class: bdr:da-1x
• css: border-style: dashed;
•   border-width: thin;

all medium width

• class: bdr:da-2x
• css: border-style: dashed;
•   border-width: medium;

all thick width

• class: bdr:da-3x
• css: border-style: dashed;
•   border-width: thick;

bottom thin width

• class: bdr:bt-da-1x
• css: border-bottom-style: dashed;
•   border-bottom-width: thin;

bottom medium width

• class: bdr:bt-da-2x
• css: border-bottom-style: dashed;
•   border-bottom-width: medium;

bottom thick width

• class: bdr:bt-da-3x
• css: border-bottom-style: dashed;
•   border-bottom-width: thick;

left thin width

• class: bdr:lt-da-1x
• css: border-left-style: dashed;
•   border-left-width: thin;

left medium width

• class: bdr:lt-da-2x
• css: border-left-style: dashed;
•   border-left-width: medium;

left thick width

• class: bdr:lt-da-3x
• css: border-left-style: dashed;
•   border-left-width: thick;

right thin width

• class: bdr:rt-da-1x
• css: border-right-style: dashed;
•   border-right-width: thin;

right medium width

• class: bdr:rt-da-2x
• css: border-right-style: dashed;
•   border-right-width: medium;

right thick width

• class: bdr:rt-da-3x
• css: border-right-style: dashed;
•   border-right-width: thick;

top thin width

• class: bdr:tp-da-1x
• css: border-top-style: dashed;
•   border-top-width: thin;

top medium width

• class: bdr:tp-da-2x
• css: border-top-style: dashed;
•   border-top-width: medium;

top thick width

• class: bdr:tp-da-3x
• css: border-top-style: dashed;
•   border-top-width: thick;

Dotted line

all thin width

• class: bdr:do-1x
• css: border-style: dotted;
•   border-width: thin;

all medium width

• class: bdr:do-2x
• css: border-style: dotted;
•   border-width: medium;

all thick width

• class: bdr:do-3x
• css: border-style: dotted;
•   border-width: thick;

bottom thin width

• class: bdr:bt-do-1x
• css: border-bottom-style: dotted;
•   border-bottom-width: thin;

bottom medium width

• class: bdr:bt-do-2x
• css: border-bottom-style: dotted;
•   border-bottom-width: medium;

bottom thick width

• class: bdr:bt-do-3x
• css: border-bottom-style: dotted;
•   border-bottom-width: thick;

left thin width

• class: bdr:lt-do-1x
• css: border-left-style: dotted;
•   border-left-width: thin;

left medium width

• class: bdr:lt-do-2x
• css: border-left-style: dotted;
•   border-left-width: medium;

left thick width

• class: bdr:lt-do-3x
• css: border-left-style: dotted;
•   border-left-width: thick;

right thin width

• class: bdr:rt-do-1x
• css: border-right-style: dotted;
•   border-right-width: thin;

right medium width

• class: bdr:rt-do-2x
• css: border-right-style: dotted;
•   border-right-width: medium;

right thick width

• class: bdr:rt-do-3x
• css: border-right-style: dotted;
•   border-right-width: thick;

top thin width

• class: bdr:tp-do-1x
• css: border-top-style: dotted;
•   border-top-width: thin;

top medium width

• class: bdr:tp-do-2x
• css: border-top-style: dotted;
•   border-top-width: medium;

top thick width

• class: bdr:tp-do-3x
• css: border-top-style: dotted;
•   border-top-width: thick;

Solid line

all thin width

• class: bdr:so-1x
• css: border-style: solid;
•   border-width: thin;

all medium width

• class: bdr:so-2x
• css: border-style: solid;
•   border-width: medium;

all thick width

• class: bdr:so-3x
• css: border-style: solid;
•   border-width: thick;

bottom thin width

• class: bdr:bt-so-1x
• css: border-bottom-style: solid;
•   border-bottom-width: thin;

bottom medium width

• class: bdr:bt-so-2x
• css: border-bottom-style: solid;
•   border-bottom-width: medium;

bottom thick width

• class: bdr:bt-so-3x
• css: border-bottom-style: solid;
•   border-bottom-width: thick;

left thin width

• class: bdr:lt-so-1x
• css: border-left-style: solid;
•   border-left-width: thin;

left medium width

• class: bdr:lt-so-2x
• css: border-left-style: solid;
•   border-left-width: medium;

left thick width

• class: bdr:lt-so-3x
• css: border-left-style: solid;
•   border-left-width: thick;

right thin width

• class: bdr:rt-so-1x
• css: border-right-style: solid;
•   border-right-width: thin;

right medium width

• class: bdr:rt-so-2x
• css: border-right-style: solid;
•   border-right-width: medium;

right thick width

• class: bdr:rt-so-3x
• css: border-right-style: solid;
•   border-right-width: thick;

top thin width

• class: bdr:tp-so-1x
• css: border-top-style: solid;
•   border-top-width: thin;

top medium width

• class: bdr:tp-so-2x
• css: border-top-style: solid;
•   border-top-width: medium;

top thick width

• class: bdr:tp-so-3x
• css: border-top-style: solid;
•   border-top-width: thick;

Abbreviations

Supported media

Notes

All border classes begin with “bdr” and are separated by a colon from it’s value. Also included in this syntax is border base, primary, and secondary colors (ie. bdr:bas+2).