CSS Border Shorthand
The border shorthand sets a border's width, style, and color in one declaration, making it the fastest way to define a full border.
Three values in one line
The <border> shorthand combines <border-width>, <border-style>, and <border-color> into a single declaration. The values can appear in any order, though width, style, color is the usual convention.
The shorthand
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid #00643c;
}
</style>
</head>
<body>
<div>Bordered box</div>
</body>
</html>The same border written out
The one-line shorthand above does exactly what these three separate rules do. The style value is required; without it, no border appears.
Longhand equivalent
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-width: 2px;
border-style: solid;
border-color: #00643c;
}
</style>
</head>
<body>
<div>Bordered box</div>
</body>
</html>Applying it to one side
The same shorthand shape works on the per-side properties, so you can define a full border for just one edge in a single line.
Bottom border only
<!DOCTYPE html>
<html>
<head>
<style>
.tab {
border-bottom: 3px solid #00643c;
}
</style>
</head>
<body>
<span class="tab">Overview</span>
</body>
</html>Note: The shorthand applies to all four sides. If you had different borders per side, the shorthand overwrites them all. Use the side properties from Border Sides when edges must differ.
Note: Round off the corners of any border with border-radius.
