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 border-left property with CSS
The CSS border-left property can be animated to create smooth transitions between different border styles, widths, and colors. This animation technique is useful for creating interactive hover effects or drawing attention to specific elements.
Syntax
@keyframes animationName {
from { border-left: initial-value; }
to { border-left: final-value; }
}
selector {
animation: animationName duration timing-function iteration-count;
}
Example: Animating Border Left Width and Color
The following example demonstrates how to animate the border-left property by changing its width and color −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #ccc;
border-left: 5px solid blue;
animation: borderLeftAnim 2s ease-in-out infinite alternate;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
color: #333;
}
@keyframes borderLeftAnim {
0% {
border-left: 5px solid blue;
}
50% {
border-left: 20px solid red;
}
100% {
border-left: 35px solid green;
}
}
</style>
</head>
<body>
<h2>Animating Border Left Property</h2>
<div class="animated-box">Watch the left border animate!</div>
</body>
</html>
A gray box with text appears on the page. The left border continuously animates from a thin blue border to a thick red border, then to an even thicker green border, and back again in a smooth transition.
Example: Border Left Style Animation
This example shows how to animate different border styles along with width changes −
<!DOCTYPE html>
<html>
<head>
<style>
.style-box {
width: 250px;
height: 150px;
background-color: #ffe6e6;
border: 1px solid #ddd;
border-left: 3px solid orange;
animation: styleChange 3s linear infinite;
padding: 20px;
margin: 20px;
font-weight: bold;
}
@keyframes styleChange {
0% {
border-left: 3px solid orange;
}
33% {
border-left: 8px dashed purple;
}
66% {
border-left: 15px dotted teal;
}
100% {
border-left: 3px solid orange;
}
}
</style>
</head>
<body>
<div class="style-box">Border Style Animation</div>
</body>
</html>
A light pink box displays with text. The left border animates through different styles: starts as a thin solid orange line, becomes a thicker dashed purple line, then a thick dotted teal line, and cycles back to the original style.
Conclusion
Animating the border-left property allows you to create engaging visual effects by smoothly transitioning between different border widths, colors, and styles. Use CSS keyframes to define the animation sequence and control timing for the best visual impact.
Updated on: 2026-03-15T13:25:28+05:30
495 Views
Advertisements