Ad

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 


Border style values


2. Border side of element 

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 

 





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 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 


Border bottom property

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


Border-bottom-width



Related post 

lnline css in html

html iframe

html id attribute

No comments

Powered by Blogger.