How to set the width of the bottom border animatable using CSS ?

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

Last Updated : 24 Jul, 2024

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:

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>

Output:

animations

How to set the width of the bottom border animatable using CSS ?

V

volumezero9786

Improve

Article Tags :

Similar Reads

How to set the width of the bottom border animatable using CSS ?

In this article, we will learn to set the width of the border-bottom animate using CSS. Approach: The border-bottom-width is the width of the bottom border, and we want to animate its width. We will use the animation property of the CSS. It takes three values The first is the name of the animation w

How to set the shape of top-left corner of div using CSS ?

In this article, we will learn How to set the shape of the top-left corner of a div using CSS. The border-top-left-radius property is used to form the shape of the top-left corner. We can use percentages to shape the top-left corner, for that, you can check this article How to set the shape of the t

How to define the border bottom color is animatable in CSS ?

In this article, we will learn How to define the border-bottom-color is animatable in CSS. Animating the border-bottom-color of an element helps draw attention to it and make it more visually interesting. Approach: The border-bottom-color is the color of the bottom border, and we want to animate its

How to specify the width of the border image using CSS?

In this article, we will set the width of the border image using CSS. To set the width of the border image, we use CSS border-image-width property. The border-image-width property is used to set the width of the border-image. It can be set by providing multiple values. If only one value is provided,

How to define the painting area of the background in CSS?

The task is to define the painting area of the background. The CSS background-clip property has a tendency to square measure victimization to outline the painting space of any net page's background. It specifies that up to that extent, we will modify the background of the webpage in terms of its con

How to Animate SVG with border-image using CSS ?

Scalable Vector Graphics or SVG is used to set vector-based graphics for the web. In this article, we will learn how to animate an SVG with border-image using CSS.Approach: Using the border-image property, there is an SVG element within which a rect element is defined to represent a rectangle of a s

How to change corner style of a canvas-type text using Fabric.js ?

In Fabric.js, altering the corner style of canvas-type text is a practical way to customize text rendering. By adjusting parameters like corner radius and corner style, developers can achieve different visual effects, enhancing the overall design of text elements on the canvas. This functionality al

How to specify the double border using CSS ?

The task is to specify the double border using CSS. In this article, we are going to use the border-style property to style the border. we have two common methods border-style property style and outline property in CSS. Property used: border-style property: This property is used to set the style of

How to create Incoming Call Animation Effect using CSS ?

In this article, we will learn how to create an incoming call animation effect, by using CSS. Approach: To create this effect, we essentially need to animate the shadow effects around the element frame, which can be easily manipulated using the CSS box-shadow property. It is described by X and Y off

How to set the background image start from the upper left corner of the content using CSS?

In this article, we will learn how to set the background image starting from the upper left corner of the content using CSS. Approach: We use the background-image property of CSS to set the background image. And for putting it in the upper left corner, we will use the background-origin property to a