CSS Properties: How to set the border top-right radius is animatable?

Last update on February 20 2024 12:26:17 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How to set the border top-right radius is animatable</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
#mydiv { /* Defines a CSS rule for an element with the ID "mydiv" */
width: 100px; /* Sets the width of the element to 100 pixels */
height: 150px; /* Sets the height of the element to 150 pixels */
border: 3px solid #FF0000; /* Sets a 3-pixel solid border with the color #FF0000 */
padding: 10px 40px; /* Sets the padding inside the element to 10 pixels on the top and bottom, and 40 pixels on the left and right */
background: #00CCCC; /* Sets the background color of the element to #00CCCC */
-webkit-animation: mymove 5s infinite; /* Applies a CSS animation named "mymove" to the element for 5 seconds, repeating infinitely (for WebKit browsers) */
animation: mymove 5s infinite; /* Applies a CSS animation named "mymove" to the element for 5 seconds, repeating infinitely */
}
@keyframes mymove { /* Defines a keyframe animation named "mymove" */
50% {border-top-right-radius: 50px;} /* Specifies the CSS property to be animated and its value at the 50% keyframe */
}  
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<h1>w3resource Tutorial</h1><!-- Displays the text 'w3resource Tutorial' within an h1 element -->
<div id="mydiv">The border-radius property allow to add rounded corners is animatable</div><!-- Displays a div element with text and rounded corners whose radius is animated -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document structure includes essential elements such as html, head, title, style, and body.
A CSS rule is defined for an element with the ID "mydiv", specifying its width, height, border, padding, background color, and applying a keyframe animation named "mymove".
The keyframe animation "mymove" is defined to change the border-top-right-radius property of the element to 50 pixels at the 50% keyframe.
The text "w3resource Tutorial" is displayed within an h1 element.
A div element with text and rounded corners, whose top-right radius is animated, is displayed.
Comments were added below the code line as requested.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page