Borders

Borders come in different thicknesses and colours, and can be applied to to a range of elements such as boxes, tables, images and paragraphs.

Standard borders

A standard border can be created using the bdr-solid class.

class="box bdr-solid bdr-uni"

You can also create a black colour border by adding bdr-black class.

class="box bdr-solid bdr-black"

Thick borders

The border can be made thicker using the bdr-medium (3px) and bdr-thick (5px) classes in combination with other border classes.

class="box bdr-solid bdr-medium bdr-uni"

class="box bdr-solid bdr-thick bdr-uni"

You can add black colour thicker borders by adding bdr-black classes in combination with other border classes bdr-medium , bdr-thick .

class="box bdr-solid bdr-medium bdr-black"

class="box bdr-solid bdr-thick bdr-black"

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-solid"

class="box bdr-bottom-solid "

class="box bdr-thick bdr-left-solid bdr-black"

class="box bdr-right-solid bdr-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.

Combinations

Border styles can be used in combination with box styles and table classes, or just used on their own.

Updated:  7 June 2021/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle