Home/ Questions/Q 8127719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T07:37:44+00:00

I have been learning css & jquery. <!DOCTYPE html> <html> <head> <style type=text/css> #box

  • 0

I have been learning css & jquery.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
 border-style:solid;
 border-color:red;
 height: 80px;
 width: 180px;
}
</style>
</head>

<body>
<div id="box">Demo Box</div>
</body>
</html>

what i am trying to achieve is the border color should appear from left top and flow to create a box border around the division. it seems impossible just want to know expert guidance if this could be done.

*Edit MobyD thanks ” like a tron bike “

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming you want an animation around the box, it could be arranged by animating a sequence of lines, each animation triggering the next, as it finishes.

    addLine1();
line1.animate({ width: width-of-box }, duration, function() {
   addLine2();
   line2.animate({ height: height-of-box }, duration, ... );
});

    Each line would have to be positioned at its appropriate corner.

    Demo

    A neater recursive solution could probably be built, but it’s something along these lines that you’d have to go with. The border property itself cannot be animated in this manner.

    • 0