Css Border bottom property
CSS Border Properties
css Border property allows you to
customize the borders around HTML elements. css border is a shorthand property
to set individual border property values in a single place. set a
thickness or width, color and style of each border. The border-color specifies
is the color of a border. border-style specifies a border should
solid-dashed line, double line, and one of the possible values. The
border-width specifies width a border.
There
three border properties
The border-style-
Specifies whether the
border should solid, dashed line, double line, one of the other possible
values. inset is a keyword to Border style and use to draw border around a box.
The border-color-
Specifies the color of a
border. The border-color property set the color of a element four borders. This property use from one to four value. If the border-color property has four
value border-color blue green red pink top border is blue.
The border-width -
Specifies the width of a
border.
border-style:
none /* Defines no border
*/ | dotted | inset | solid | dashed | groove| double| outset
| hidden | ridge
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
Example
<!DOCTYPE html>
<html>
<head> <style>
p.a{border-style: dotted solid dashed double; }
p.b{ border-style: dotted solid dashed;}
p.c { border-style: dotted solid;}
p.d {border-style: dotted ;}
</style>
</head>
<p class="a"> http://webdesigningtheory.blogspot.com/</p>
<p class="b"> http://webdesigningtheory.blogspot.com/</p>
<p class="c"> http://webdesigningtheory.blogspot.com/</p>
<p class="d"> http://webdesigningtheory.blogspot.com/</p>
</body> </html>
Border side of element
output
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 head with a solid red bottom border</h1>
<h2>A head with a dotted blue bottom border</h2>
<div>A div elemente with a double bottom border.</div>
</body>
</html>
Border bottom property output
4. Border-bottom-width
border-bottom-width: - The
border-bottom-width property set the width of element bottom border. Always
declared border-style or border-bottom-style property before the border-
bottom-width property. An element must have border before you 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 medium bottom or border</h1>
<div>div element is the medium bottom border.</div><br>
<p>This is medium a bottom border using pixels</p>
</body>
</html>
Border-bottome-width
output
Comments
Post a Comment