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
Animate CSS border-top property
The CSS border-top property can be animated to create dynamic visual effects. You can animate the border width, color, and style using CSS animations and transitions.
Syntax
selector {
border-top: width style color;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { border-top: initial-value; }
to { border-top: final-value; }
}
Example: Animating Border Top Width and Color
The following example demonstrates how to animate the border-top property by changing its width and color −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 5px solid #333;
margin: 50px auto;
padding: 20px;
text-align: center;
animation: borderAnimation 3s infinite alternate;
}
@keyframes borderAnimation {
0% {
border-top: 5px solid #333;
}
50% {
border-top: 20px solid #ff6b6b;
}
100% {
border-top: 35px solid #4ecdc4;
}
}
</style>
</head>
<body>
<div class="animated-box">
<h3>Animated Border Top</h3>
<p>Watch the top border change!</p>
</div>
</body>
</html>
A gray box with animated top border that continuously changes from a thin black border to a thick red border, then to an even thicker teal border, creating a smooth color and width transition effect.
Example: Hover-triggered Border Animation
You can also trigger border-top animation on hover using CSS transitions −
<!DOCTYPE html>
<html>
<head>
<style>
.hover-border {
width: 250px;
height: 100px;
background-color: #fff;
border: 2px solid #ddd;
margin: 30px auto;
padding: 20px;
text-align: center;
transition: border-top 0.5s ease;
cursor: pointer;
}
.hover-border:hover {
border-top: 15px solid #007bff;
}
</style>
</head>
<body>
<div class="hover-border">
<p>Hover over me!</p>
</div>
</body>
</html>
A white box with light gray borders that transforms when hovered - the top border smoothly expands to become thick and blue, creating an interactive hover effect.
Conclusion
Animating the border-top property adds visual appeal to web elements. Use @keyframes for continuous animations or transition for hover effects to create engaging user interfaces.
Updated on: 2026-03-15T13:19:23+05:30
274 Views
Advertisements