CSS Properties: How to set the border-width is animatable?

Go to Exercise page

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-width is animatable>/title>>!-- Sets the title of the HTML document -->
>style type="text/css"> /* Begins a CSS style block */
#xyzdiv { /* Defines a CSS rule for an element with ID "xyzdiv" */
width: 200px; /* Sets the width of the element */
height: 150px; /* Sets the height of the element */
border: 1px solid black; /* Sets the border properties */
-webkit-animation: mymove 5s infinite; /* Specifies the animation for WebKit browsers */
animation: mymove 5s infinite; /* Specifies the animation for all browsers */
}
@keyframes mymove { /* Defines a keyframe animation named "mymove" */
50% {border-width: 20px; /* Sets the border width to 20px at the midpoint of the animation */
border-color: #22CF64; /* Sets the border color to #22CF64 at the midpoint of the animation */
}
}  
>/style>>!-- Ends the CSS style block -->
>/head>>!-- Ends the head section of the HTML document -->
>body>>!-- Contains the content of the HTML document -->
>p>w3resource Tutorial>/p>>!-- Displays a paragraph with the text "w3resource Tutorial" -->
>div id="xyzdiv">Animatable border>/div>>!-- Displays a div element with ID "xyzdiv" and text "Animatable border" -->
>p>>b>Note:>/b> The border-width property does not work alone.>/p>>!-- Displays a note about the border-width property -->
>/body>>!-- Ends the body section of the HTML document -->
>/html>>!-- Ends the HTML document -->

Explanation:

• The >!DOCTYPE html> declaration specifies the document type and version of HTML being used.
• The >html> element is the root element of the HTML document.
• The >head> element contains metadata about the HTML document, such as the title.
• The >title> element sets the title of the HTML document.
• The >style> element begins a CSS style block.
• The #xyzdiv selector defines a CSS rule for an element with the ID "xyzdiv".
• The width and height properties set the dimensions of the element.
• The border property sets the border properties of the element (1px solid black).
• The -webkit-animation and animation properties specify the animation for WebKit browsers and all browsers respectively.
• The @keyframes rule defines a keyframe animation named "mymove".
• The 50% keyframe specifies the styles at the midpoint of the animation.
• Within the 50% keyframe, the border-width property is set to 20px and the border-color property is set to #22CF64.
• The >/style> element ends the CSS style block.
• The >body> element contains the content of the HTML document.
• The >p> element displays a paragraph with the text "w3resource Tutorial".
• The >div> element with the ID "xyzdiv" displays a div element with the text "Animatable border".
• The >p> element with the note displays a note about the border-width property.
• The >/body> element ends the body section of the HTML document.
• The >/html> element ends the HTML document.

Live Demo:

See the Pen border-animatable-width-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Yes	Yes	Yes	Yes	Yes

Go to Exercise page