CSS – Borders
CSS – Borders
To specify borders within a box, different properties in HTML page can be given using CSS. These properties are as below,
Border-color: it specifies the border’s color in the appropriate position like top, bottom, left and right.
Border-style: it specifies the type of the border like solid, double line, dashed line, inset, outset, hidden, etc. It also specifies the location like top, bottom, left and right.
Border-width: it determines the width of the border in the appropriate position like top, bottom, left and right.
Example:
<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
</style>
</head>
<body>
<p class = "example1">
This demonstrates all borders in different colors.
</p>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-bottom-width:2px;border-top-width:12px;
border-left-width: 6px;border-right-width:6px;border-style:solid;">
This is a border with four different width.
</p>
<p style = "border:3px solid blue;">
This example demonstrates color, width and style property for border at once.
</p>
</body>
</html>
Output:
Quiz :
Quiz 1: What are the various properties used in border using CSS?
Quiz 2: What is border-style? Give different types of styles in CSS with examples.