CSS border-style Property Tutorial

In this section, we will learn what the border-style property is and how to use it in CSS.

Click here to run the example of border-style property.

CSS border-style Property Definition and Usage

Styles are a way of making borders look more attractive and fashionable! Also, it helps to make part of a page distinguishable from the other parts.

In order to apply styles to the borders of an element, we can use `border-style` property.

Basically, the `border-style` is a shorthand property that allows us to set styles for all four borders of an element in one declaration.

CSS border-style Property Syntax

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Now the way we use these values for the `border-style` property are:

border-style: value1 value2 value3 value4;

Using this syntax: the value1 is applied to the top border, the value2 is applies to right border; the value3 is applied to bottom border, and the value4 is applied to left border.

border-style: value1 value2 value3;

Using this syntax: the value1 is applied to the top border, the value2 is applied to the left and right borders, and finally the value3 is applied to the bottom border.

border-style: value1 value2;

Using this syntax: the value1 is applied to the top and bottom borders, and the value2 is applied to the right and left borders.

border-style: value

Using this syntax: the value is applied to all four borders of an element.

CSS border-style Property Value

The values for this property are as follows:

  • solid: it creates a solid single line.
  • dotted: it creates a series of square dots.
  • dashed: it creates a series of short lines
  • double: it creates two solid lines
  • groove: it creates a line that appears to be carved into the page
  • ridge: it creates a line that appears to stick out from the page.
  • inset: it creates a line that appears to embedded into the page.
  • outset: it creates a line that like it is coming out of the display device.
  • Hidden/none: using these two values, no borders will be created.

Note: the two global values “initial” and “inherit” could also be used for this property.

Example: CSS border styling

See the Pen CSS border styling by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-style Property Work?

The value we set for the `border- style ` property applies to all 4 sides of the border of an element, which means all have the same style.

But you can set a style for each individual border as well using these properties:

Example: CSS dashed border

See the Pen CSS dashed border by Enjoy Tutorials (@enjoytutorials) on CodePen.

Leave a Reply