CSS Border - Individual Sides
You can set a different border for each side of an element.
CSS has separate properties for each side: border-top-style, border-right-style, border-bottom-style, and border-left-style.
You can get the same result with the shorthand border-style property, which takes one to four values:
- Four values (
dotted solid double dashed): top, right, bottom, left. - Three values (
dotted solid double): top, then right and left, then bottom. - Two values (
dotted solid): top and bottom, then right and left. - One value (
dotted): all four sides.
This also works with border-width and border-color.
Individual side properties
Each side is set with its own property.
Prompt
An HTML page that styles each border side separately.
In an internal
<style> block, style a paragraph with border-top-style dotted, border-right-style solid, border-bottom-style dotted, and border-left-style solid. Add a paragraph to show it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>Different Border Styles</p>
</body>
</html>
Shorthand with two values
The shorthand border-style: dotted solid gives the same result.
Prompt
An HTML page that gets the same per-side result using the border-style shorthand.
In an internal
<style> block, give a paragraph border-style "dotted solid" so the top and bottom are dotted and the left and right are solid. Add a paragraph to show it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<p>Different Border Styles</p>
</body>
</html>
One to four values
The number of values changes which sides get which style.
Prompt
An HTML page that shows how border-style behaves with four, three, two, and one value.
In an internal
<style> block, make four paragraph classes: "dotted solid double dashed", "dotted solid double", "dotted solid", and "dotted". Add a labeled paragraph for each so the difference is clear.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.four {
border-style: dotted solid double dashed;
}
p.three {
border-style: dotted solid double;
}
p.two {
border-style: dotted solid;
}
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<p class="four">Four values: dotted top, solid right, double bottom, dashed left.</p>
<p class="three">Three values: dotted top, solid sides, double bottom.</p>
<p class="two">Two values: dotted top and bottom, solid sides.</p>
<p class="one">One value: all four sides dotted.</p>
</body>
</html>