CSS Properties: How to set the border radius animatable?

Last update on February 19 2024 13:02:11 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set the border radius animatable</title><!-- Title of the HTML document -->
<style type="text/css">
/* CSS styling */
#mydiv { 
width: 100px; /* Sets the width of the div */
height: 150px; /* Sets the height of the div */
border: 3px solid #FF0000; /* Sets a solid red border with a thickness of 3 pixels */
padding: 10px 40px; /* Sets the padding inside the div */
background: #00CCCC; /* Sets the background color to a light blue shade */
-webkit-animation: mymove 5s infinite; /* Animates using the 'mymove' animation for 5 seconds, repeatedly */
animation: mymove 5s infinite; /* Animates using the 'mymove' animation for 5 seconds, repeatedly */
}
@keyframes mymove { /* Keyframes for the 'mymove' animation */
50% {border-radius: 50px;} /* At 50% of the animation, sets the border-radius to 50 pixels */
}  
</style>
</head>
<body>
<h1>w3resource Tutorial</h1><!-- Heading -->
<div id="mydiv">The border-radius property allows adding rounded corners and is animatable</div><!-- Div element with rounded corners that is animatable -->
</body>
</html>

Explanation:

This HTML document demonstrates how to animate the border-radius property using CSS animations.
The div with the id mydiv is styled to have a width of 100 pixels, a height of 150 pixels, a solid red border with a thickness of 3 pixels, padding of 10 pixels at the top and bottom, 40 pixels on the left and right sides, and a light blue background color.
An animation named mymove is defined using keyframes, specifying that at 50% of the animation duration, the border-radius property is set to 50 pixels.
Both -webkit-animation and animation properties are used to apply the mymove animation to the mydiv element, making the border-radius property animatable.
As a result, the border-radius property of the div changes over the course of the animation, creating a visual effect of the corners becoming rounded and then returning to their original shape.

Live Demo:

See the Pen border-radius-animatable-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page