Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set the width of the bottom border animatable using CSS?
In CSS, the border-bottom-width property controls the thickness of an element's bottom border. You can create smooth animations by combining this property with CSS animations and keyframes to gradually change the border width over time.
Syntax
selector {
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
0% { border-bottom-width: initial-width; }
100% { border-bottom-width: final-width; }
}
Example 1: Animating Div Bottom Border
The following example demonstrates how to animate a div's bottom border width from 5px to 25px and back
<!DOCTYPE html>
<html>
<head>
<style>
.animated-div {
width: 500px;
height: 200px;
background-color: #ff6b6b;
border: 2px solid #4ecdc4;
border-bottom: 5px solid #2c3e50;
animation: border-pulse 3s infinite;
margin: 20px;
}
@keyframes border-pulse {
0% { border-bottom-width: 5px; }
30% { border-bottom-width: 15px; }
60% { border-bottom-width: 25px; }
85% { border-bottom-width: 15px; }
100% { border-bottom-width: 5px; }
}
</style>
</head>
<body>
<h2>Animating Bottom Border Width</h2>
<div class="animated-div"></div>
</body>
</html>
A red rectangular div with a pulsing dark blue bottom border that smoothly animates from 5px to 25px width and back continuously.
Example 2: Text Element Border Animation
This example shows how to animate the bottom border of a text heading element
<!DOCTYPE html>
<html>
<head>
<style>
.animated-text {
width: fit-content;
border: 1px dotted #3498db;
border-bottom: 1px solid #e74c3c;
animation: text-border-grow 2s infinite ease-in-out;
padding: 10px 15px;
color: #27ae60;
font-family: Arial, sans-serif;
margin: 20px;
}
@keyframes text-border-grow {
0% { border-bottom-width: 1px; }
25% { border-bottom-width: 3px; }
50% { border-bottom-width: 6px; }
75% { border-bottom-width: 3px; }
100% { border-bottom-width: 1px; }
}
</style>
</head>
<body>
<h2>Text Border Animation</h2>
<h3 class="animated-text">Welcome to TutorialsPoint!</h3>
</body>
</html>
A green text heading with a red bottom border that smoothly grows from 1px to 6px and back, creating a pulsing underline effect.
Conclusion
Animating the bottom border width creates engaging visual effects using the animation property and @keyframes. You can control the border thickness at different animation stages using border-bottom-width or the shorthand border-bottom property.
Updated on: 2026-03-15T17:33:20+05:30
1K+ Views
Advertisements