BlogsDope image BlogsDope

CSS border-style

Aug. 20, 2018 BORDER 1198

The border-style property is used to set the style of the borders of an element. It is a shorthand property that sets the values of the four border properties - border-top-styleborder-right-styleborder-bottom-styleand border-left-style in a single declaration.

CSS

border-style: [border-top-style] [border-right-style] [border-bottom-style] [border-left-style];

Note that you must define the border-style property other than none or hidden for giving the border-width and the border-color values. This is because there is no border present by default. So in order to give a border width or color, you must first define a border using the border-styleproperty.

Values

none : Specifies no border. This is the default value. In this case, giving border-color and border-width values have no effect. In case of collapsing borders or table cell, if all the borders at the collapsing edge are set to none, then only the borders will be hidden at that edge.

hidden : This is the same as none and displays no border. In case of collapsing borders or table cell, if any one of the borders at the collapsing edge is hidden, then none of the borders will be displayed at that edge.

dotted : Specifies dotted border.

dashed : Specifies border as a series of small dashes.

solid : Specifies border as a single line.

double : Specifies border consisting of two parallel lines. The total border-width is the sum of the widths of the two lines and the perpendicular space between them

groove : Specifies a 3D grooved border which appears as if it were carved in canvas.

ridge : Specifies a 3D ridged border which appears as if it were coming out of canvas.

inset : Specifies a border such that the content inside the border appears as if it were embedded in canvas.

outset : Specifies a border such that the content inside the border appears as if it were coming out of canvas.

initial : Sets the default value.

inherit : Inherits the value from parent element.

You can give four or less than four values to the border-width property. The effect of each of these on border width is given below.

Giving four values

The first, second, third and fourth values define the top, right, bottom and left border styles respectively.

CSS

border-style: dotted solid double groove;

For the above declaration

  • top border is dotted
  • right border is solid
  • bottom border is double lined
  • left border is grooved

Giving three values

The first and the third values define the top and the bottom border styles respectively. The second value defines the right and the left border styles.

CSS

border-style: dotted solid double;

For the above declaration

  • top border width is dotted
  • right and left border widths are solid
  • bottom border width is double lined

Giving two values

The first value defines the top and the bottom border styles. The second value defines the right and the left border styles.

CSS

border-style: dotted solid;

For the above declaration

  • top and bottom borders are dotted
  • right and left borders are solid

Giving one value

It defines all the four border styles.

CSS

border-style: solid;

For the above declaration

  • borders of all the four sides are solid

Examples

The following demo shows different declarations for giving border styles.

See the Pen border-style examples by Aakhya Singh (@aakhya) on CodePen.

As stated earlier, the border-style property must be defined while defining the border color or width because there needs to be a border to change the color or width of. If no border-color is defined, then the browser gives the default color to the border.

Another example is given below which shows the border styles for different values of the property.

See the Pen border-style values by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all major browsers. The value hidden is not supported in IE7 and its earlier versions. This value was later supported by IE9 and higher versions. This property is supported by IE 8 only if a !DOCTYPE is specified.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).