Embedded Files
CSS Border - Shorthand Property
CSS Border - Shorthand Property
Like you saw in the previous page, there are many properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and border-color.</p>
</body>
</html>
CSS
p {
border: 5px solid blue;
}
You may also define all of the border characteristics for a single side:
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>I may be gone.</h2>
<p>But I'll be there to see the future with you.</p>
</body>
</html>
CSS
p {
border-left: 6px solid blue;
background-color: Lightblue;
}
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Always remember.</h2>
<p>The greatest glory in living lies not in never falling, but in rising every time we fall.</p>
</body>
</html>
CSS
p {
border-bottom: 6px solid blue;
background-color: lightblue;
}
Page updated
Google Sites
Report abuse