Is CSS border-style property animatable?

HTML-CSS
1

Hi Everyone,
In the CSS properties, I came across a property called border-style.
It was written as the border-style property was not animatable however when I execute these codes it is animatable.

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  width: 300px;
  height: 200px;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {border-style: solid;}
  to {border-style: dotted;}
}
</style>
</head>
<body>
<div id="myDIV"></div>
</body>
</html>

So then why is it not animatable?

2

According to MDN it’s animatable: border-style - CSS: Cascading Style Sheets | MDN

3

You can transition between the styles but there isn’t going to be any real interpolation (animation type discrete just swaps the values at 50%).

Also, border-style is not on the list of animatable CSS properties on MDN. Not sure what the official definition of animatable is, but I’m guessing it’s something like “property values that can be meaningfully combined”.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.