Display border effects by using transmission effects in CSS 3. Assume suitable parameters if required.

12views

written 6.2 years ago by

binitamayekar ★ 6.6k

Border Transmission Effects

Following program shows different types of border transmission effects:

<!DOCTYPE html>
<html>
<head>
<title>Border Transition Effects</title>
<style>
div{
  width:100px;
  height:60px;
  margin: 50px;
  padding: 5px;
  text-align: center;
  border: 1px solid black;
}
.box1:hover {
  border-width:50px;
  border-radius:50px;
  border-color:skyblue;
  border-style:solid;
  transition:2s ease;
}
.box2:hover {
  border-width:5px;
  border-radius:50px;
  border-color:green;
  border-style:dotted;
  transition:2s ease;
}
.box3:hover {
  color: blue;
  border-top: 60px solid orange;
  border-bottom: 60px solid green;
  transition:2s ease;
}
.box4:hover {
  color:violet;
  border-top: none;
  border-bottom: none;
  border-left: 10px solid violet;
  border-right: 10px solid violet;
  transition:2s ease;
}
.box5:hover {
  border-style:double;
  border-width:10px;
  transition:2s ease;
}
.box6:hover {
  border-style:dotted dashed solid double;
  border-width:5px;
  transition:2s ease;
}
.box7:hover {
  border-width:0px;
  transition:0s ease;
}
.box8:hover {
  border-width:10px;
  border-radius:50px;
  border-top-color: yellow;
  border-bottom-color: orange;
  border-left-color: blue;
  border-right-color: purple;
  transition:2s ease;
}
.box9:hover {
  border-top-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 20px;
  border-right-width: 10px;
  transition:2s ease;
}
.box10:hover {
  box-shadow: 20px 20px 20px grey;
  border-width:5px;
  transition:2s ease;
}
</style>
</head> 
<body><center>
<div class="box1"><p>Border-solid</p></div>
<div class="box2"><p>Border-dotted</p></div>
<div class="box3"><p>Indian-Flag</p></div>
<div class="box4"><p>Border-left-right</p></div>
<div class="box5"><p>Border-double</p></div>
<div class="box6"><p>Border-mixed</p></div>
<div class="box7"><p>No-Border</p></div>
<div class="box8"><p>Border-colors</p></div>
<div class="box9"><p>Border-widths</p></div>
<div class="box10"><p>Border-shadow</p></div>
</center></body>
</html>

ADD COMMENT EDIT