Css3 Boder Transition - Css

How to make border transition effects in css3?

Snippet Code

Rate this page :
  [ 0 votes]

The below code helps you to create border transition effects on hover in CSS3.

<style> a { background:green; background-origin: border-box; display: inline-block; width: 100px; height: 100px; border-width: 50px; border-color: rgba(0,0,0,0); border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } a:hover {border-width: 0;border-color: rgba(0, 0, 0,0.8);} .firstt{border-style: dashed;} .second{border-style: double;} .third{border-style: dotted;} </style> <a href="#" class="firstt"></a> <a href="#" class="second"></a> <a href="#" class="third"></a>


Ask Questions

Ask Question