border-style (CSS property)

Syntax

border-style: { { none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset } ^{1 to 4 values} | inherit } ;

Description

The shorthand property border-style sets the style of the border on all four sides of an element using the values specified. Each border can have its own value—refer to the mnemonic (TRouBLe) in Shorthand Properties for an easy way to remember the shorthand order.

Borders are placed on top of the element’s background.

Example

This style rule assigns a solid border
to the top, a dashed border to the bottom, and a dotted border to the
left- and right-hand sides of paragraphs within the element with ID
"example":

#example p {
  border-style: solid dotted dashed;
}

Value

none means no border will show, and the computed border-width is zero.
hidden has the same meaning as none, except when it refers to table borders in cases where two cells share a border, and the table cells have collapsed borders (border-collapse:collapse;). The value hidden ensures that no border is drawn, since hidden takes precedence over all other border styles. If none had been used for one border in the cell, the border would still be drawn, as the adjacent cell’s border would take precedence. See Table Formatting for more information.
dotted implements the border as a series of dots.
dashed implements the border as a series of dashes.
solid implements the border as a solid line.
double implements the border as two solid lines. The sum of the two border widths and the space between them equals the value that has been set for border-width.
groove is a three-dimensional effect that gives the impression that the border is carved into the canvas.
ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.
inset is a 3D effect that gives the impression that the box is embedded into the canvas. When it’s used on tables to which the separated borders model has been applied, the inset value appears to make the whole box look as though it were embedded into the canvas. When used with the collapsing border model, it’s treated the same as the value ridge.
outset is a 3D effect that has the opposite effect of inset in that the border gives the impression that the box protrudes from the canvas. When it’s used on tables to which the separated borders model has been applied, the border makes the whole box look as though it were coming out of the canvas. When it’s used with the collapsing border model, it behaves the same way as groove.

Previously, in CSS1, user agents were allowed to interpret all dotted, dashed, double, groove, ridge, inset, and outset styles as solid.

Frequently Asked Questions (FAQs) about CSS Border Styles

What are the different types of border styles in CSS?

In CSS, there are several types of border styles that you can use to customize the appearance of your web elements. These include ‘none’, ‘hidden’, ‘dotted’, ‘dashed’, ‘solid’, ‘double’, ‘groove’, ‘ridge’, ‘inset’, and ‘outset’. Each style has a unique visual effect. For example, ‘dotted’ creates a border with a series of dots, while ‘double’ creates a double line border.

How can I set the width and color of a border in CSS?

In CSS, you can set the width and color of a border using the ‘border-width’ and ‘border-color’ properties respectively. For example, to set a border width of 5 pixels and a color of red, you would use the following code:

border-width: 5px;
border-color: red;

What is the difference between ‘none’ and ‘hidden’ border styles in CSS?

The ‘none’ and ‘hidden’ border styles in CSS might seem similar, but they have a subtle difference. ‘None’ means that no border is drawn, while ‘hidden’ means that the border is drawn but not visible. This difference is most noticeable in table elements where ‘hidden’ can be used to hide borders between cells.

How can I specify different border styles for different sides of an element in CSS?

In CSS, you can specify different border styles for different sides of an element using the ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, and ‘border-left-style’ properties. For example, to set a solid border on the top and a dotted border on the bottom, you would use the following code:

border-top-style: solid;
border-bottom-style: dotted;

How can I use the shorthand ‘border’ property in CSS?

The shorthand ‘border’ property in CSS allows you to set the width, style, and color of a border in one line of code. The syntax is ‘border: width style color;’. For example, to set a 5 pixel solid red border, you would use the following code:

border: 5px solid red;

What is the default border style in CSS?

The default border style in CSS is ‘none’, which means no border is drawn. If you want to add a border to an element, you need to specify a border style other than ‘none’.

Can I use hexadecimal color codes for border colors in CSS?

Yes, you can use hexadecimal color codes to specify border colors in CSS. For example, to set a border color to light blue, you would use the following code:

border-color: #ADD8E6;

How can I create a rounded border in CSS?

You can create a rounded border in CSS using the ‘border-radius’ property. This property allows you to set the radius of the border corners, creating a rounded effect. For example, to set a border radius of 10 pixels, you would use the following code:

border-radius: 10px;

Can I use the ‘border’ property in CSS with images?

Yes, you can use the ‘border’ property in CSS to add borders to images. This can be useful for highlighting images or separating them from other elements on the page.

How can I create a border with a gradient color in CSS?

Creating a border with a gradient color in CSS is a bit more complex and requires using a background image with a linear gradient and adjusting the padding and background-clip properties. Here is an example of how you can do it:

.box {
background: linear-gradient(to bottom, red, blue);
border-width: 10px;
border-style: solid;
border-image: linear-gradient(to bottom, red, blue) 1;
}