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:
|border: 2px solid blue|
|border: 2px double blue|
|border: 2px dashed blue|
|border: 2px dotted blue|
|border: 5px groove orange|
|border: 5px ridge orange|
|border: 5px inset orange|
|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:
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.
<!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>