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"

Colour (bdr-uni in this example) comes from the border colour class.

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-uni bdr-medium"

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

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 bdr-uni"

class="box bdr-bottom-solid bdr-college "

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

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


The border will default to the University or relevant College colour unless a border colour class is applied. Border colour classes are available in the full set of University and College colours:

  • bdr-uni, bdr-uni50, bdr-uni25, bdr-uni10
  • bdr-grey, bdr-grey50, bdr-grey25, bdr-grey10
  • bdr-black
  • bdr-white
  • bdr-college, bdr-college50, bdr-college25, bdr-college10


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

Updated:  21 February 2018/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle