Joseph A. Joseph A. - 6 months ago 3x
HTML Question

CSS animation - How to fill in "starting from border"?

Quite a simple question, really, however I could not find anything online.

Basically, how do you animate a fill-in with a specific color of an element starting at the border?

E.g the border gets bigger and bigger until the shape is filled.


If I understand your question you want to animate the border-width of the element, maybe the border-top-width, but I don't think that will create the effect that you are looking for, increasing the border will only push the element as much as the border width gets set to, it won't look like if the element is being filled, you can animate a nested element that will cover the outer element, you can check this example to see what I'm saying


#theBorderDiv, #theTwoDivs { 
 display: inline-block;
background-color: #CCC;
height: 0px;
width: 300px;
border-top-color: red;
border-top-style: solid;
border-top-width: 1px;
height: 200px;
vertical-align: top;

  margin-top: 200px;
  position: relative;

  position: absolute;
  height: 0px;
  width: 300px;
  background-color: red;
<div id="theBorderDiv"></div>

<div id="theTwoDivs">    
 <div id="theInnerDiv"></div>

The javascript:

 <script type="text/javascript">