Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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. 

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


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.


<!DOCTYPE html>
        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;


animations of all corners

My Personal Notes arrow_drop_up
Last Updated : 30 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials