CSS border-style Property

Description

The border-style property specifies the border style of an element. Used as a shortcut to determine the entire border style in one rule.

Initial value
See individual properties
Applies to
All elements
Inherited
No
Media
Visual
Computed value
See individual properties
Animatable
No
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.style.borderStyle

Syntax

border-style: <line-style>{1,4} 

Values

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  • noneBorder is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn.
  • hiddenSame as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
  • dottedA series of round dots.
  • dashedA series of square-ended dashes.
  • solidA single line segment.
  • doubleTwo parallel solid lines with some space between them.
  • grooveDisplays a border leading to a carved effect. It is the opposite of ridge.
  • ridgeLooks as if it were coming out of the canvas.
  • insetLooks as if the content on the inside of the border is sunken into the canvas.
  • outsetLooks as if the content on the inside of the border is coming out of the canvas.
  • inherit

Example

<div class="border">This is an example of the border-style property using a purple dashed border 2px in width.</div>
.border {
   border-style: dashed;
   border-width: 2px;
   border-color: purple;
   margin: 20px;
   padding: 20px;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
412113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
31841431.0

Last updated by CSSPortal on: 12th October 2019