/ / /

Rainbow Divs

February 7, 2021

This example uses HTML and CSS to create a border of colored divs.

<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow Divs</title>
    <style>
      div {
        padding: 25px;
        font-size: 72px;
        text-align: center;
        border: thin solid black;
        color: white;
      }

      .red {
        background-color: red;
      }

      .orange {
        background-color: orange;
      }

      .yellow {
        background-color: yellow;
      }

      .green {
        background-color: #00ff00;
      }

      .blue {
        background-color: blue;
      }

      .violet {
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="red">
      <div class="orange">
        <div class="yellow">
          <div class="green">
            <div class="blue">
              <div class="violet">Happy Coding!</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Code Editor ?

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

Tweak Ideas

Create a gradient from different shades of the same color.
Add content to each layer of div.

CSS

CSS Examples

Comments

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!