How to define the shape of the corners is animatable using CSS ?

Last Updated : 05 Jun, 2023

The task is to animate the shape of all corners using the CSS. Cascading Style Sheets(CSS) is a language used to give style to the web page. The shape of corners can be defined and animated using CSS by utilizing the “border-radius” property. By specifying a value for “border-radius” in conjunction with CSS animations or transitions, the corners of an element can be dynamically transformed and animated.

Properties used: In this article, we will make use of the following properties

animation: This property is used to change one form of the style to another.
border-bottom-right-radius: This property is used to define the radius of the bottom-right corner.
border-bottom-left-radius: This property is used to define the radius of the bottom-left corner.
border-top-left-radius: This property is used to define the radius of the top-left corner.
border-top-right-radius: This property is used to define the radius of the bottom-left corner.
@Keyframes rule: This rule is used to animate the changes gradually from the current style to the new style at certain times.

Approach:The first task is to create the basic HTML page structure with the style element. After creating the style tag into the head tag, we will add the border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-top-right-radius properties to style all the corners and also provide the animation with the help of the animation property.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
 
        h2 {
            margin-left: 10px;
            margin-top: 30px;
            margin-right: 15px;
            background-color: lightgreen;
            border: 5px solid green;
            height: 100px;
 
            animation: mymove 5s infinite;
        }
 
        @keyframes mymove {
            60% {
                border-bottom-right-radius: 60px;
                border-top-left-radius: 60px;
                border-top-right-radius: 60px;
                border-bottom-left-radius: 60px;
            }
        }
    </style>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
</body>
</html>