border-bottom - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:border-bottom

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. border-bottom

Introduction

Only the border-bottom-width, and border-bottom-color properties are animatable in CSS among all the individual border-bottom properties.

The border-style property is not animatable.

Demo Code

ResultView the demo in separate window 

!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-bottom Property Animation</title>
  <style type="text/css">
.animated {<!--from ww w  .j av a  2  s . c  om-->
  width: 300px;
  padding: 40px 0;
  font: bold 50px sans-serif;
  text-align: center;
    background: #EEEEEE;
    border: 2px solid red;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}

@-webkit-keyframes test {
    50% {border-bottom: 20px solid indigo;}
}

@keyframes test {
    50% {border-bottom: 20px solid indigo;}
}
</style>
 </head>
 <body>

  <p> </p>
  <div class="animated">
   Box
  </div>
 </body>
</html>

Related Tutorials