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

<p style="border: 1px none #000000;padding:3px;"></p>

none: Outlines no border

<p style="border: 1px dotted #000000;padding:3px;width:80%;"></p>

dotted: Outlines a dotted border

<p style="border: 1px dashed #000000;padding:3px;width:80%;"></p>

dashed: Outlines a dashed border

<p style="border: 1px solid #000000;padding:3px;width:80%;"></p>

solid: Outlines a solid border

<p style="border: 3px double #000000;padding:3px;width:80%;"></p>

double: Outlines two borders.

<p style="border: 5px groove blue;padding:3px;width:80%;"></p>

groove: Outlines a 3D grooved border.

<p style="border: 5px ridge red;padding:3px;width:80%;"></p>

ridge: Outlines a 3D ridged border.

<p style="border: 5px inset green;padding:3px;width:80%;"></p>

inset: Outlines a 3D inset border.

<p style="border: 5px outset orange;padding:3px;width:80%;"></p>

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

comments powered by Disqus