Css Border



Css border properties


Learn About Css border And See How can we use Css Border Properties For create Css Border,
As we know Css (Cascading style sheets) uses for make website structure and an website nothing without border so this chapter you know how can we create border for our website or web pages....

In This Page we learn about css properties....

1.Width of css border 
2.height of css border
3.Style of css border 
4.Radius css border 
5.Remove css border line
6.Adjust border side





1.width of border 

Create an full width border for your web page as You call this header of website
   
   #border{
    width:100%;
     }
Css border

   #border{
    width:50%;
     }
Css border












     #border{
    width:25%;
     }
Css border


2.height of border

As same we apply css border width properties now we apply css border height properties for make height of border...


Css border

For create css border width or height we can use of px instead of percentage in above image we create three level of css border height 
    
.border{
    height:500px or 200px or 150px;
     }

now you can create css border width and height according to your web page......


3.Style of border 

If do you want to give an additional shape or style to your css border then you can use css border style properties in below you can see how can we apply css border style...

1.dotted border
2.dashed border
3.solid border
4.double border
5.groove border

Css border

6.Ridge border
7.inset border
8.Outset border
9.Mixed border

Css border
Properties of  css border style see how can we use 

.border{-1
border-style: dotted; 
}

.border-2{
border-style: dashed;
}

.border-3{
border-style: solid;
}

.border-4 {
border-style: double;
}

.border-5{
border-style: groove;
}

.border-6 {
border-style: ridge;
}

.border-7{
border-style: inset;
}

.border-8{
border-style: outset;
}



4.Radius Css border 

if do you want create shape on your css border you need know about border radius properties in below you can easily understand it.

see how can you radius an border by  using css properties and

.border {
border-radius:100px;
border:1px solid red;
width:100%
height:200px;
}

Css border



Radius one side border by using one side properties

.border {
 border-top-left-radius:100px;
border:1px solid red;
width:100%
height:200px;

}

Css border


you can radius four side of border and per side you can change according to your choice by use px as you see below

.border {
border-radius:120px 0px 120px 0px;
border:1px solid red;
width:100%
height:200px;
}


Css border




4.Remove border line
 If do you want you can remove line of your css border see below how can use css border line remove properties


.border {
border-left:none;
}


Css border


 .border {
 border-top:none;
  }
Css border



Visit More