welcome to tutorialfamily

css border

css border used to know content area.

we can use border with different style.

top, bottpm, left and right border style.

It specify the content space and area.


css border – all type given below.

  • dotted – Used for a dotted border
  • double – Used for a double border
  • ridge – Used for a 3D ridged border.
  • dashed – Used for a dashed border
  • solid – Used for a solid border
  • outset – Used for a 3D outset border.
  • none – Used for no border
  • groove – Used for a 3D grooved border.
  • inset – Used for a 3D inset border.
  • hidden – Used for a hidden border

example


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
.car{
   color: red;
   padding:5px;
   border-style:solid;
   margin:5px 0;
}
.car1{
   color: red;
   padding:5px;
   border-style:dotted;
   margin:5px 0;
}
.car2{
   color: red;
   padding:5px;
   border-style:dashed;
   margin:5px 0;
}
.car3{
   color: red;
   padding:5px;
   border-style:double;
   margin:5px 0;
}
.car4{
   color: red;
   padding:5px;
   border-style:ridge;
   margin:5px 0;
}
.car5{
   color: red;
   padding:5px;
   border-style:groove;
   margin:5px 0;
}
.car6{
   color: red;
   padding:5px;
   border-style:outset;
   margin:5px 0;
}
.car7{
   color: red;
   padding:5px;
   border-style:inset;
   margin:5px 0;
}
.car8{
   color: red;
   padding:5px;
   border-style:hidden;
   margin:5px 0;
}
.car9{
   color: red;
   padding:5px;
   border-style:none;
   margin:5px 0;
}
</style>
</head>
<body>


<div class="car">solid border</div>
<div class="car1">dotted border</div>
<div class="car2">dashed border</div>
<div class="car3">double border</div>
<div class="car4">ridge border</div>
<div class="car5">groove border</div>
<div class="car6">outset border</div>
<div class="car7">inset border</div>
<div class="car8">hidden border</div>
<div class="car9">no border</div>
</body>
</html>


Run

Our Content