CSS Border Properties
CSS Border property allows you to customize the borders around HTML elements. It is a shorthand property to set individual border property values in a single place. You can set the thickness or width, color and style of each border. The border-color specifies the color of a border. The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values. The border-width specifies the width of a border.
There are mainly three border properties
The border-style-
Specifies whether a border should be solid, dashed line, double line, or one of the other possible values. inset is a keyword to Border style and is used to draw border around a box.
The border-color-
Specifies the color of a border. The border-color property sets the color of an element's four borders. This property can have from one to four values. If the border-color property has four values: border-color: red green blue pink; top border is red.
The border-width -
Specifies the width of a border.
border-style:
none /* Defines no border */ | solid | double | dotted | dashed | groove | inset | outset | ridge | hidden
1. Border style
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {border: 5px solid red; }
h2{ border: 5px double blue; }
h3{border: 5px dotted yellow; }
h4 {border: 5px dashed pink; }
h5 { border: 5px groove blue; }
h6 { border: 5px outset; }
div { border-width:5px; border-style: inset;}
p {border:5px ridge;}
</style>
</head>
<body>
solid double | dotted | dashed | groove | inset | outset | ridge
<h1>Solid Border</h1>
<h2>Double Border</h2>
<h3>Dotted Border</h3>
<h4>Dashed Border</h4>
<h5>Groove Border</h5>
<h6>Insert Border</h6>
<div>Inset Border</div>
<p> Ridge Border </p>
</body>
</html>
Border style values
output
2. Border side of element
Example
<!DOCTYPE html>
<html>
<head> <style>
p.one {border-style: dotted solid dashed double; }
p.two { border-style: dotted solid dashed;} p.three { border-style: dotted solid;}
p.four {border-style: dotted ;}
</style>
</head>
<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>
<p class="three">This is some text in a paragraph.</p>
<p class="four">This is some text in a paragraph.</p>
</body> </html>
Border side of element
output
3. Border bottom property
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 { border-bottom: 5px solid pink;}
h2 { border-bottom: 4px dotted blue;}
div { border-bottom: double;}
</style>
</head>
<body>
<h1>A heading with a solid red bottom border</h1>
<h2>A heading with a dotted blue bottom border</h2>
<div>A div element with a double bottom border.</div>
</body>
</html>
Border bottom property output
4. Border-bottom-width
border-bottom-width: The border-bottom-width property sets the width of an element's bottom border. Always declare the border-style or the border-bottom-style property before the border- bottom-width property. An element must have borders before you can change the width.
Border bottom width
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 { border-bottom-style: solid;
border-bottom-width: medium; }
div { border-style: solid;
border-bottom-width: thick;}
p{ border-style: solid; border-bottom-width: 15px;}
</style>
</head>
<body>
<h1>A heading with a medium bottom border</h1>
<div>A div element with a medium bottom border.</div><br>
<p>This is medium bottom border using pixels</p>
</body>
</html>
Border-bottome-width
output
No comments:
Post a Comment