CSS Borders

Borders are an integral part of any website; to create a website borders are often used to divide up sections of a page, to separate the navigation area from the rest of the content, or to separate the footer from the main content.  CSS borders can be utilised to separate content with a subtle border, or in other cases can be used to easily identify a section of a particular page. 

Below are some examples of some border widths, styles and colours, it’s always good practise to experiment with the different styles, colours etc. until you find a border that blends in with your website.

CSS Border Style, Width, Colour

none: Outlines no border

dotted: Outlines a dotted border

dashed: Outlines a dashed border

solid: Outlines a solid border

double: Outlines two borders.

groove: Outlines a 3D grooved border.

ridge: Outlines a 3D ridged border.

inset: Outlines a 3D inset border.

outset: Outlines a 3D outset border.

CSS Border Properties

• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-left-color
• border-left-style
• border-left-width
• border-right-color
• border-right-style
• border-right-width
• border-top-color
• border-top-style
• border-top-width

CSS Border Styles

• none
• solid
• dotted
• dashed
• double
• groove
• rigid
• inset
• outset
• hidden