CSS border-style Property

CSS border-style Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-style property controls how an element’s border edges are drawn without changing their color or thickness. It governs the visual pattern or treatment applied to the border box for each side (top, right, bottom, left), and can be specified collectively or independently per edge. Conceptually, it tells the rendering engine whether and in what manner the border should be rendered, while leaving color and width to their corresponding properties.

Because appearance, width and color are separate concerns, border-style is frequently used together with related properties to produce the final visible border. For managing thickness you pair it with border-width, and for hue or opacity with border-color. The shorthand border sets style along with those other aspects in a single declaration; longhand style declarations and more specific side rules will override or refine what a shorthand sets.

From the layout and rendering perspective, the setting of border-style affects more than just aesthetics. Whether a border is drawn influences the box model because borders occupy space and can alter element dimensions and hit-testing. It also has visual interactions with effects that surround or decorate the box - for example, outlines are drawn in relation to borders and can appear outside them (outline), and shadows applied with box-shadow will visually combine with the border appearance. Finally, because style can be set per side, it is a useful tool for creating asymmetric or decorative borders without changing widths or colors.

Definition

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.borderStyle

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

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

Values

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

HTML

<div class="container">

  <h1>CSS border-style examples</h1>

  <div class="row">

    <div class="box solid">solid</div>

    <div class="box dashed">dashed</div>

    <div class="box dotted">dotted</div>

  </div>

  <div class="row">

    <div class="box double">double</div>

    <div class="box groove">groove</div>

    <div class="box ridge">ridge</div>

  </div>

  <div class="row">

    <div class="box inset">inset</div>

    <div class="box outset">outset</div>

    <div class="box none">none</div>

  </div>

</div>

CSS

body {
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  padding: 20px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 18px;
}

.row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 28%;
  min-width: 160px;
  padding: 18px;
  text-align: center;
  background: #ffffff;
  border-width: 6px;
  border-style: solid;
  border-color: #333333;
  box-sizing: border-box;
}

.box.solid { border-style: solid; }
.box.dashed { border-style: dashed; }
.box.dotted { border-style: dotted; }
.box.double { border-style: double; }
.box.groove { border-style: groove; }
.box.ridge { border-style: ridge; }
.box.inset { border-style: inset; }
.box.outset { border-style: outset; }
.box.none { border-style: none; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.