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

12views

written 5.7 years ago by

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