Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to set the width of the bottom border animatable using CSS ?

  • Last Updated : 23 Apr, 2021

In this article, we will learn to set the width of the border-bottom animate using CSS.

Approach: The border-bottom-width is the width of the bottom border, and we want to animate its width. We will use the animation property of the CSS. It takes three values

  • The first is the name of the animation which is a keyframe name that we want to bind with.


    @keyframe myFun
         border-bottom-color: red;
  • The second is the time for which it animates.
  • And the last one is the number of times we want to animate.


    animation: animation_name animation_duration animation_count



<!DOCTYPE html>
      .gfg {
        width: 300px;
        height: 200px;
        border: solid 1px green;
        color: green;
        font-size: 30px;
        margin-left: 20%;
        animation: myFun 5s infinite;
      @keyframes myFun {
        100% {
          border-bottom-width: 25px;
    <div class="gfg">GeeksforGeeks</div>



My Personal Notes arrow_drop_up
Recommended Articles
Page :