Borders
Borders come in different thicknesses and colours, and they can be applied to elements like boxes, tables, images and paragraphs.
Overview
The default border styles are solid borders on all sides. Therefore, we are using the same class names as the boxes.
Standard border
Box with a coloured 1px-wide border
| Class name | Border colour | Border width | Background colour | Note |
|---|---|---|---|---|
.box-bdr-gold | #be830e | 1px | #ffffff | |
.box-bdr-black | #000000 | 1px | #ffffff | |
.box-bdr-white | #ffffff | 1px | #000000 | Should only be used on dark background. |
Thick border
Box with a coloured 3px-wide border
| Class name | Border colour | Border width | Background colour | Note |
|---|---|---|---|---|
.box-bdr-thick-gold | #be830e | 3px | #000000 | |
.box-bdr-thick-black | #000000 | 3px | #ffffff | |
.box-bdr-thick-white | #ffffff | 3px | #000000 | Should only be used on dark background. |
Top, bottom & side borders
Borders can be applied to just one side of an element, these classes can also be combined to apply borders to multiple sides.
The classes are named using the format bdr-{side}-{colour}. For example, .bdr-left-gold
Where side is one of:
top: top border with 1px widthleft: left border with 1px widthright: right border with 1px widthbottom: bottom border with 1px width
Where colour is one of:
black: #000000gold: #BE830Ewhite: #FFFFFF
If you wish to have a side border with 3px width, please use .bdr-thick. For example, <p class= "bdr-left-gold bdr-thick">
No borders
If you wish to remove the border from one side of an element, please use the classes below:
noborder: remove borders on all sidesnoborder-top: remove top bordernoborder-left: remove left bordernoborder-right: remove right bordernoborder-bottom: remove bottom border
Use cases
Standard border - 1px width
class="box-bdr-gold"class="box-bdr-black"Thick border - 3px width
class="box-bdr-thick-gold"class="box-bdr-thick-black"Side border
We also have variations in black and white border, change gold to black or white.
class="bdr-top-gold"class="bdr-left-gold"class="bdr-right-gold"class="bdr-bottom-gold bdr-thick"class="bdr-right-gold bdr-bottom-gold"class="bdr-top-gold bdr-left-gold bdr-bottom-gold"No border
class="box-bdr-black noborder"class="box-bdr-black noborder-top"class="box-bdr-black noborder-left"class="box-bdr-black noborder-right"class="box-bdr-black noborder-bottom"class="box-bdr-black noborder-top noborder-bottom"Borders come in different thicknesses and colours, and can be applied to to a range of elements such as boxes, tables, images and paragraphs.
For the use of borders, we are using the same class names as boxes. Please find the detailed description in the style guide for box. Here we are giving the examples as a quick reference:
Standard border:
Thick border:
Top, bottom & side borders
Borders can be applied to just one side of an element such as a box, table, image or paragraph using the following classes. These classes can be combined to apply borders to multiple sides.
class="box bdr-top-gold"
class="box bdr-bottom-gold "
class="box bdr-left-black bdr-thick"
class="box bdr-right-black"
No borders
Borders can be removed from just one side of an element such as a box, table, image or paragraph using the following classes:
noborder-top,noborder-right,noborder-bottom,noborder-left
All borders can be removed from an element by using the noborder class.