Border
Border Shorthand
| border-none | border: none; |
Border Radius
| border-radius | border-radius: 5px; |
| border-radius-medium | border-radius: 10px; |
| border-radius-full | border-radius: 50%; |
Border Width
| border-0 | border-width: 0; |
| border-t-0 | border-top-width: 0; |
| border-b-0 | border-bottom-width: 0; |
| border-l-0 | border-left-width: 0; |
| border-r-0 | border-right-width: 0; |
| border-1 | border-width: 1px; |
| border-t-1 | border-top-width: 1px; |
| border-b-1 | border-bottom-width: 1px; |
| border-l-1 | border-left-width: 1px; |
| border-r-1 | border-right-width: 1px; |
| border-2 | border-width: 2px; |
| border-t-2 | border-top-width: 2px; |
| border-b-2 | border-bottom-width: 2px; |
| border-l-2 | border-left-width: 2px; |
| border-r-2 | border-right-width: 2px; |
| border-4 | border-width: 4px; |
| border-t-4 | border-top-width: 4px; |
| border-b-4 | border-bottom-width: 4px; |
| border-l-4 | border-left-width: 4px; |
| border-r-4 | border-right-width: 4px; |
| border-6 | border-width: 6px; |
| border-t-6 | border-top-width: 6px; |
| border-b-6 | border-bottom-width: 6px; |
| border-l-6 | border-left-width: 6px; |
| border-r-6 | border-right-width: 6px; |
| border-8 | border-width: 8px; |
| border-t-8 | border-top-width: 8px; |
| border-b-8 | border-bottom-width: 8px; |
| border-l-8 | border-left-width: 8px; |
| border-r-8 | border-right-width: 8px; |
| border-thin | border-width: thin; |
| border-t-thin | border-top-width: thin; |
| border-b-thin | border-bottom-width: thin; |
| border-l-thin | border-left-width: thin; |
| border-r-thin | border-right-width: thin; |
| border-medium | border-width: medium; |
| border-t-medium | border-top-width: medium; |
| border-b-medium | border-bottom-width: medium; |
| border-l-medium | border-left-width: medium; |
| border-r-medium | border-right-width: medium; |
| border-thick | outline-width: thick; |
| border-t-thick | outline-top-width: thick; |
| border-b-thick | outline-bottom-width: thick; |
| border-l-thick | outline-left-width: thick; |
| border-r-thick | outline-right-width: thick; |
Border Style
| border-style-none | border-style: none; |
| border-style-hidden | border-style: hidden; |
| border-style-dotted | border-style: dotted; |
| border-style-dashed | border-style: dashed; |
| border-style-solid | border-style: solid; |
| border-style-double | border-style: double; |
| border-style-groove | border-style: groove; |
| border-style-ridge | border-style: ridge; |
| border-style-inset | border-style: inset; |
| border-style-outset | border-style: outset; |
| border-style-inherit | border-style: inherit; |
| border-style-initial | border-style: initial; |
Usage
<p class="border-2 border-style-solid border-radius">Hello World</p>
Outline
Outline Shorthand
| outline-none | outline: none; |
Outline Width
| outline-0 | outline-width: 0; |
| outline-1 | outline-width: 1px; |
| outline-2 | outline-width: 2px; |
| outline-4 | outline-width: 4px; |
| outline-6 | outline-width: 6px; |
| outline-8 | outline-width: 8px; |
| outline-thin | outline-width: thin; |
| outline-medium | outline-width: medium; |
| outline-thick | outline-width: thick; |
Outline Style
| outline-style-auto | outline-style: auto; |
| outline-style-none | outline-style: none; |
| outline-style-dotted | outline-style: dotted; |
| outline-style-dashed | outline-style: dashed; |
| outline-style-solid | outline-style: solid; |
| outline-style-double | outline-style: double; |
| outline-style-groove | outline-style: groove; |
| outline-style-ridge | outline-style: ridge; |
| outline-style-inset | outline-style: inset; |
| outline-style-outset | outline-style: outset; |
| outline-style-inherit | outline-style: inherit; |
| outline-style-initial | outline-style: initial; |
| outline-style-revert | outline-style: revert; |
| outline-style-unset | outline-style: unset; |