CSS Border

When it comes to adding borders with CSS, you have various options.

Common border styles include the solid border, dotted border, dashed border, double border, groove border, ridge border, insertion, and outset border.

Here are some examples:

Solid border
 border: 2px solid blue
Double border
 border: 2px double blue
Dashed border
 border: 2px dashed blue
Dotted border
 border: 2px dotted blue
Groove border
 border: 5px groove orange
Ridge border
 border: 5px ridge orange
Inset border
 border: 5px inset orange
Outset border
 border: 5px outset orange

Individual styles will need to have a size greater than 1em or 1 pixel to be displayed clearly.

There are three significant border properties:

  • The border-style is used to assign the type of border, which can be a dashed line or a plain solid edge.
  • The border-color is used to designate the color of your border.
    If you choose not to assign a specific color to your borders, the color will default to the color of the parent element.
  • The border-width is used to adjust the thickness of your border.
    You can assign borders of different thickness on all four sides of your document.
    Border width uses pixel units.

To specify border styles to certain sides only you can amend the code to include the particular side you want to style:

border-(side)-style
border-(side)-width
border-(side)-color

You can use a shorter alternative code to combine all three properties into a single line, with the size first, type of border second and color third, as seen below.

Code:


<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="/file/stylesheet.css">

</head>

<body>

          <p style="border:2px dashed blue;">border:2px dashed blue</p>

</body>

</html>

Output:

border:2px dashed blue