Border of an element goes around the padding and content.
CSS Border Properties
The CSS border properties allow you to define the border area of a box. The border can either be a predefined style like, solid line, double line, dotted line, etc. or it can be an image. The following section will describe you how to set the various properties defining the style (border-style), color (border-color), and thickness (border-width) of the border.
The border-width Property
The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS border-width property</title>
<style type="text/css">
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: 5px 10px;
}
p.three {
border-style: solid;
border-width: 5px 10px 15px;
}
p.four {
border-style: solid;
border-width: medium 10px thick 15px;
}
</style>
</head>
<body>
<p class="one"><strong>one-value syntax:</strong> the single value sets the width of all four border sides.</p>
<p class="two"><strong>two-value syntax:</strong> the first value sets the width of the top and bottom border, while the second value sets the width of the right and left sides border.</p>
<p class="three"><strong>three-value syntax:</strong> the first value sets the width of the top border, the second value sets the width of the right and left border, and the third value sets the width of the the bottom border.</p>
<p class="four"><strong>four-value syntax:</strong> each value sets the width of the border individually in the order top, right, bottom, and left.</p>
<p><strong>Note:</strong> You must declare the <code>border-style</code> property before the <code>border-width</code> property. An element must have borders before you can set the width of the border.</p>
</body>
</html>
Note:If the value for the
border-widthproperty is missing or not specified, the default value (medium) of theborder-widthwill be used instead.
The border-style Property
The border-style property sets the style of a box’s border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.
The border-style property may take one of the following values: none, hidden, dashed,dotted, double, groove, inset, outset, ridge and solid.
none: Defines no border
hidden: Defines hidden border.
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
p {
border-style: dotted;
}
The border-color Property
The border-color property specify the color of a box’s border. This is also a shorthand property for setting the color of all the four sides of an element’s border.
p {
border-style: solid;
border-color: #ff0000;
}
Note:The
border-colorproperty does not work if it is used alone. Use theborder-styleproperty to set the border first.
The border Shorthand Property
The border CSS property is a shorthand property for setting one or more of the individual border properties border-style, border-width and border-color in a single rule.
p {
border: 5px solid #ff4500;
}
If the value for an individual border property is omitted or not specified while setting the border shorthand property, the default value for that property will be used instead, if any.
Note:If the value for the
border-colorproperty is missing or not specified when setting the borders for an element (e.g.border:5px solid;) the element’scolorĂ‚Âproperty will be used as the value for theborder-color.
In this example, the border will be a solid black line of 5px width:
p {
color: black;
border: 5px solid;
}
But, in the case of border-style, omitting the value will cause no border to show at all, because the default value for border-style property is none.
In the example below, there will be no border:
p {
border: 5px #00ff00;
}