The CSS Borders property allows you to customize the borders of HTML elements.In order to add a border to the element, you need to specify the size, style, and color of the border.
i. border-style
ii. border-color
iii. border-width
CSS border-style:
The default value of border-style is none, which defines no border.
There are various styles supported for the border-style property: dotted, dashed, double, etc
1. none : It doesn’t define any border.
2. dotted: It is used to define a dotted border.
3. dashed: It is used to define a dashed border.
4. solid :It is used to define a solid border.
5. double: It defines two borders with the same border-width value.
6. groove: It defines a 3d grooved border. effect is generated according to border-color value.
7. ridge: It defines a 3d ridged border. effect is generated according to border-color value.
8. inset : It defines a 3d inset border. effect is generated according to border-color value.
9. outset : It defines a 3d outset border. effect is generated according to border-color value.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
CSS border-width:
The properties for the border can be set separately. The border-width property specifies the width of the border.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>
CSS border-color:
The border color of the element can be defined using a color name, RGB, or Hex values.
→ Name: It specifies the color name. For example: “green”.
→RGB: It specifies the RGB value of the color. For example: “rgb(255,0,0)”.
→ Hex: It specifies the hex value of the color. For example: “#ff0000”.
There is also a border color named “transparent”. If the border color is not set it is inherited from the color property of the element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>
Recommended Posts: