CSS: border-style property

April 2018

Simple effect on the edges

You can set up simple effects with CSS, such as as a dotted border.

border-style: value;

Possible values:
  • dashed
  • dotted
  • double
  • groove
  • hidden
  • inset
  • none
  • outset
  • ridge
  • solid

Note that

In your statements, always set the "border-style" before the "border-color" property. Indeed, a border should be materialized before being colored.

Working with the size

You can set the size of an edge with the property:

border-width: value;

Possible values:
  • Length
  • Thin
  • Medium
  • Thick


A short summary of the property in image:

Source: Css Débutant

Published by jak58. Latest update on February 21, 2011 at 08:04 AM by jak58.
This document, titled "CSS: border-style property," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (https://ccm.net/).
CSS - Avoid distorted webpages
CSS to enhance the presentation of your images