How to Create a Flashing Border on DIV

Written by robert allen
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create a Flashing Border on DIV
Make your website more active by adding a flashing border to a DIV. (Stockbyte/Stockbyte/Getty Images)

Creating a flashing border on a <DIV> element is a good way to draw the attention of visitors to your website. In order to accomplish this, you'll need to use JavaScript's "set Interval()" function to create a loop to flash the border of the DIV. The number of colours used in the flashing animation is effectively limitless, meaning you can create a flashing border to match any website or environment.

Skill level:


  1. 1

    Open the .HTML or .PHP file that contains your webpage. Because rich-text editors like Word can introduce formatting errors that reduce compatibility, use a simple editor like Notepad or TextEdit to make changes to the HTML code.

  2. 2

    Scroll down to the header section of the HTML document. Add the following code immediately following the "<head>" opening tag:

    <script type="Text/JavaScript">


    var state = 0;

    var flashtime = 100;

    function flash(div_id) { self.setInterval("change Border('" + div_id + "')",flashtime); }

    function change Border(div_id) {

    if(state==0) { document.getElementById(div_id).style.borderColor='#ffffff'; state=1; }

    else{ document.getElementById(div_id).style.borderColor='#000000'; state=0;}




  3. 3

    Change "#ffffff" -- solid white -- and "#000000" -- solid black -- if needed, to colours that fit your website better. Use standard HTML colour notation, with "#" followed by two hexadecimal numbers for the red value, two for the green and two for the blue.

  4. 4

    Add a new <DIV> element in the body section of your webpage using the following code:

    <div onclick="flash('flashing')" id="flashing" style="border: 4px solid #000000;">Start Flashing</div>

    This will create a new DIV, with a thick border around the words "Start Flashing" that, when clicked, flashes the DIV border rapidly.

Tips and warnings

  • The code can be used with any element; just change the part between the parentheses of the flash() function to the id of the new DIV. For example, if you had a div called "container," you would write "" instead.
  • If you want to flash the border with more than two colours, add "else if" statements after the "if()" statement in the change Border() function, increasing the value of the variable "state" each time; for instance, "else if(state==1) { document.getElementById(div_id).style.borderColor='#888888'; state=2; }" will cause the DIV border to flash grey ("#888888") before it flashes black.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.