Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 23 Apr, 2021
Improve Article
Save 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.



<!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
Related Articles

Start Your Coding Journey Now!