CSS Properties: How to set the border is animatable?

Go to Exercise page


HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<title>How to set the border is animatable</title><!-- Title of the HTML document -->
<style>/* CSS style start*/
width: 150px; /* Setting width to 150 pixels for <div> elements */
height: 150px; /* Setting height to 150 pixels for <div> elements */
border : 5px dotted coral; /* Setting border properties: width, style, and color */
-webkit-animation: mymove 3s infinite; /* Applying animation to the border using webkit for compatibility */
animation: mymove 5s infinite; /* Applying animation to the border */
@keyframes mymove {
50% {border-color: #CFF63E;} /* Defining keyframes for animation: changing border color to #CFF63E at 50% */
<div id="DIV"><!-- Div element with id "DIV" -->
<h2><em>The border-color is animatable in CSS</em></h2><!-- Heading with emphasized text -->


  • This HTML document demonstrates how to animate the border color using CSS.
  • The CSS style block defines styling for the <div> element.
  • width and height properties are set to 150 pixels for the <div> element.
  • border property sets the border width, style (dotted), and color (coral) for the <div> element.
  • Animation is applied to the border color using @keyframes and the mymove animation name.
  • At 50% of the animation duration, the border color changes to #CFF63E.
  • The HTML content consists of a <div> element with an <h2> heading containing emphasized text.

Live Demo:

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

See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes No

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.