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-color property
The CSS border-top-color property can be animated to create dynamic color transitions on an element's top border. This property defines the color of the top border and can smoothly transition between different color values using CSS animations.
Syntax
selector {
border-top-color: color;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { border-top-color: initial-color; }
to { border-top-color: final-color; }
}
Example
The following example demonstrates how to animate the border-top-color property from yellow to red −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 15px solid yellow;
border-top-color: yellow;
animation: colorChange 3s infinite alternate;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: #333;
}
@keyframes colorChange {
0% {
border-top-color: yellow;
}
50% {
border-top-color: orange;
}
100% {
border-top-color: red;
}
}
</style>
</head>
<body>
<h2>Animating Border Top Color</h2>
<div class="animated-box">
Watch the top border!
</div>
</body>
</html>
A gray box with a thick border appears on the page. The top border smoothly transitions from yellow to orange to red and back, creating a continuous color animation effect.
Key Points
- The element must have a visible border for the animation to be noticeable
- Color transitions work with any valid CSS color values (hex, RGB, HSL, named colors)
- Use
alternatedirection to create a back-and-forth animation effect - The
infiniteiteration count makes the animation loop continuously
Conclusion
Animating the border-top-color property creates engaging visual effects by smoothly transitioning between different colors. This technique is useful for creating attention-grabbing elements and interactive UI components.
Updated on: 2026-03-15T13:31:23+05:30
209 Views
Advertisements