programplug Logo




CSS Border

The CSS border propertis allow us to specify the size,style,width and color of an element's border.
Some of the given properties are given below:

  • border-style
  • border-color
  • border-width
  • border-radius

1) CSS border-style:
This property is used to make the border type in which you want to display on the web page.
The following values of border-style are allowed to design the style:

VALUES DESCRIPTION
dashed It describe a dashed border.
dotted It deals with a dotted border.
double It describe a double border.
groove It describe a 3D grooved border and the effect depends on their border-color value.
ridge It describe a 3D ridged border and the effect depends on their border-color value.
outset It describe a 3D outset border and the effect depends on their border-color value.
inset It describe a 3D inset border and the effect depends on their border-color value.
hidden It describe a hidden border.
Example of css border:
<!DOCTYPE html> 
  <html> 
    <head>  
    <style>  
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
 </style>  
 </head>   
 <body>  

 <h2>A border-style</h2>
 <p>This property defines how you want border to display: </p>

 <p class="dotted"> dotted border. </p>
 <p class="dashed"> dashed border. </p>
 <p class="solid"> solid border. </p>
 <p class="double"> double border. </p>
 <p class="groove"> groove border. </p>
 <p class="ridge"> ridge border. </p>
 <p class="inset"> inset border. </p>
 <p class="outset">outset border. </p>
 <p class="none">no border. </p>
 <p class="hidden"> hidden border. </p>
 <p class="mix"> mixed border.</p>
 </body>  
 </html> 
 
output:

A border-style

This property defines how you want border to display:

dotted border.

dashed border.

solid border.

double border.

groove border.

ridge border.

inset border.

outset border.

no border.

mixed border.



2) CSS Border Width:
The border width property refer to make the width of four borders.
The width can be set accordeing to their size (px,cm,em,pt etc) and you can set the border by pre-defined values, thin,thick or medium.

Example of css border width:
<!DOCTYPE html> 
  <html> 
    <head>  
    <style>  
p.form1 {  
    border-style: double;  
    width:150px;
	border-color: blue;  
}  
p.form2 {  
    border-style: double;  
    width:200px;
    border-color: green;  
}   
    </style>  
    </head>   
     <body>  
     <p class="form1"> Solid red border </p>   
    <p class="form2">Green border </p>   
    </body>  
 </html> 
output:

Solid red border

Green border


3) CSS border-color:
It defines how the four border color is set in an HTML element. There are three method for using the color of border.

RGB - It is used for the RGB value of the color. like "rgb(255,99,71)"
HEX- it is used for the value of hex color.Like:'#ff6347'
NAME - It denote the value of color name. For example "green".

Example of css Border Color
<!DOCTYPE html> 
  <html> 
    <head>  
    <style>  
p.para1 {  
    border-style: solid;  
    border-color: green;  
}  
p.para2 {  
    border-style: solid;  
    border-color: red;  
}   
 </style>  
 </head>   
 <body>  
 <p class="para1">  This is a solid red border </p>    
 <p class="para2">  This is a solid green border </p>    
 </body>  
 </html> 
output:

This is a solid red border

This is a solid green border


4) CSS border-radius:
This property used to give the radius of a border in which you can make a cirlce.

Example css border-color
<!DOCTYPE html> 
  <html> 
    <head>  
    <style>  
p.form1 {  
    border-style: solid;  
    border-radius: 100%;  
    border-color: red;  
}  
p.form2 {  
    border-style: solid;  
    border-radius: 80%; 
	height:80px;
	width:90px;
    border-color: green;  
}   
 </style>  
 </head>   
 <body>  
 <p class="form1"> solid red border </p>  
 <p class="form2">solid green border </p>  
 </body>
 </html>
Output:

solid red border

solid green border






Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy