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
Perform Animation on border-right-width property
The CSS border-right-width property can be animated to create smooth transitions of the right border thickness. This creates engaging visual effects where the border grows or shrinks over time.
Syntax
selector {
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { border-right-width: initial-value; }
to { border-right-width: final-value; }
}
Example
The following example demonstrates animating the border-right-width from 15px to 25px −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-border {
width: 300px;
height: 200px;
background-color: #f0f8ff;
border: 15px solid #4CAF50;
border-right-color: #ff6b6b;
animation: borderAnimation 3s infinite alternate;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #333;
}
@keyframes borderAnimation {
0% {
border-right-width: 15px;
}
100% {
border-right-width: 40px;
border-right-color: #e74c3c;
}
}
</style>
</head>
<body>
<h2>Border Right Width Animation</h2>
<div class="animated-border">Watch the Right Border</div>
</body>
</html>
A light blue box with green borders appears. The right border continuously animates from thin (15px) to thick (40px), changing from red to darker red, creating a pulsing effect that alternates back and forth.
Key Points
- The
border-right-widthproperty accepts length values (px, em, rem) - Use
infinitefor continuous animation or specify a number for limited repetitions - The
alternatedirection makes the animation reverse on each cycle - Combine with
border-right-colorchanges for more dramatic effects
Conclusion
Animating border-right-width creates smooth border thickness transitions. Combine it with color changes and proper timing functions to create visually appealing effects for UI elements.
Updated on: 2026-03-15T13:26:12+05:30
143 Views
Advertisements