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-left-radius property
The CSS border-top-left-radius property can be animated to create smooth transitions or dynamic effects. This property controls the rounding of the top-left corner of an element.
Syntax
@keyframes animationName {
from {
border-top-left-radius: initial-value;
}
to {
border-top-left-radius: final-value;
}
}
selector {
animation: animationName duration timing-function iteration-count;
}
Example: Animating border-top-left-radius on a Box
The following example demonstrates how to animate the top-left corner radius of a box −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 200px;
height: 150px;
background-color: #4CAF50;
border: 5px solid #45a049;
margin: 50px auto;
animation: cornerAnimation 3s infinite alternate;
}
@keyframes cornerAnimation {
0% {
border-top-left-radius: 0px;
background-color: #4CAF50;
}
100% {
border-top-left-radius: 80px;
background-color: #ff9800;
}
}
h2 {
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h2>Animated Border Top Left Radius</h2>
<div class="animated-box"></div>
</body>
</html>
A green box appears that continuously animates its top-left corner from sharp (0px radius) to rounded (80px radius) while changing color from green to orange. The animation repeats back and forth every 3 seconds.
Example: Button Hover Animation
This example shows animating the border radius on hover −
<!DOCTYPE html>
<html>
<head>
<style>
.hover-button {
padding: 15px 30px;
background-color: #2196F3;
color: white;
border: none;
border-top-left-radius: 5px;
cursor: pointer;
transition: border-top-left-radius 0.5s ease;
font-size: 16px;
margin: 50px auto;
display: block;
}
.hover-button:hover {
border-top-left-radius: 50px;
background-color: #1976D2;
}
</style>
</head>
<body>
<button class="hover-button">Hover Over Me</button>
</body>
</html>
A blue button with slightly rounded top-left corner. When hovered, the top-left corner smoothly animates to become more rounded (50px radius) and the color changes to a darker blue.
Conclusion
The border-top-left-radius property can be effectively animated using CSS keyframes or transitions. This creates engaging visual effects for corners while maintaining smooth performance across different elements.
Updated on: 2026-03-15T13:15:25+05:30
116 Views
Advertisements