CSS Border Style

With the CSS border properties, the style, width, and color of an element's border can be adjusted. The property border-style specifies what type of border should be displayed.

The following values are possible:

• • dotted – Defines a dotted line
  • dashed – Defines a dashed line
  • solid – Defines a solid line
  • double – Defines a double line
  • groove - Defines a 3D border. The effect depends on the border color value.
  • ridge - Defines a ridged 3D border. The effect depends on the border color value.
  • inset - Defines a 3D “inset” line. This means that a thick line is displayed on the left and top edges of the border and a faded line on the right and bottom edges of the border. The effect depends on the border color value.
  • outset – Defines a 3D “outset” line. This means that a thick line is displayed on the right and bottom edges of the border and a faded line on the left and top edges of the border. The effect depends on the border color value.
  • none – Defines no border
  • hidden - Defines a hidden border

The border-style property can have one to four values (for the top border, right border, bottom border, and left border).

Example CSS Syntax:

p.solid {border-style: solid;}

This is what the different values look like:

Dotted line

Dashed line

Solid line

Double line

3D border

Ridged 3D border

3D “inset” line

3D “outset” line

No border

Hidden border

Do you have any questions about this topic? Or do you need help designing your website from a professional web agency in Munich? Then feel free to contact us!