HTML & CSS

border-style (CSS property)

    Adam Roberts
    Share

    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.