How to set the width of the bottom border animatable using CSS ? Last Updated : 15 May, 2023 Comments Improve Suggest changes Like Article Like Report 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. Syntax: @keyframe myFun { 100%{ border-bottom-width: 25px; } }The second is the time for which it animates.And the last one is the number of times we want to animate. Syntax: animation: animation_name animation_duration animation_count Example: In this example, we will animate the bottom border. HTML <!DOCTYPE html> <html> <head> <style> .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; } } </style> </head> <body> <div class="gfg">GeeksforGeeks</div> </body> </html> Output: animation Comment More infoAdvertise with us Next Article How to set the width of the bottom border animatable using CSS ? K kapilnama1998 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How to set the width of the bottom border in CSS ? In this article we will learn about how to set the width of the bottom border in CSS, We can set the width of the bottom border using the border-bottom-width CSS property. We can give the size in pixels and also can give predefined values such as thick, thin...etc. Approach 1: We will use inline CSS 2 min read How to specify the width of the border image using CSS? In this article, we will set the width of the border image using CSS. To set the width of the border image, we use CSS border-image-width property. The border-image-width property is used to set the width of the border-image. It can be set by providing multiple values. If only one value is provided, 2 min read How to define the shape of the corners is animatable using CSS ? The task is to animate the shape of all corners using the CSS.  Cascading Style Sheets(CSS) is a language used to give style to the web page. The shape of corners can be defined and animated using CSS by utilizing the "border-radius" property. By specifying a value for "border-radius" in conjunction 2 min read How to define the border bottom color is animatable in CSS ? In this article, we will learn How to define the border-bottom-color is animatable in CSS. Animating the border-bottom-color of an element helps draw attention to it and make it more visually interesting. Approach: The border-bottom-color is the color of the bottom border, and we want to animate its 1 min read How to apply bottom border with only Input text field using CSS ? Adding a bottom border to the input field visually distinguishes it from surrounding elements on the page. Making input fields stand out on a website in a form for example is crucial. Styling these inputs with clear borders, appealing colors, and effects, can easily capture the user’s attention.Tabl 3 min read Like