CSS Border - Shorthand Property
There are many border properties to keep track of. To make the code shorter, you can set them all in one border property.
The border shorthand sets these properties, in this order: border-width, border-style (required), and border-color.
You can also set all the values for just one side using border-left, border-right, border-top, or border-bottom.
All borders
One declaration sets the width, style, and color of all four borders.
Prompt
An HTML page that sets width, style, and color in one border declaration.
In an internal
<style> block, give a paragraph border: 5px solid red. 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: 5px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Left border
The border-left shorthand sets the width, style, and color of just the left border.
Prompt
An HTML page that uses the border-left shorthand for just one side.
In an internal
<style> block, give a paragraph border-left: 6px solid red. Add a paragraph to show only the left border.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-left: 6px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Bottom border
The border-bottom shorthand sets just the bottom border.
Prompt
An HTML page that uses the border-bottom shorthand for just one side.
In an internal
<style> block, give a paragraph border-bottom: 6px solid red. Add a paragraph to show only the bottom border.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border-bottom: 6px solid red;
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>