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"

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"

Colours

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-uni75, bdr-uni50, bdr-uni25, bdr-uni10
  • bdr-grey, bdr-grey75, bdr-grey50, bdr-grey25, bdr-grey10
  • bdr-black
  • bdr-white
  • bdr-college, bdr-college75, bdr-college50, bdr-college25, bdr-college10

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:  12 April 2018/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle