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