Gradient Color Border

A technique useful for attracting attention to a section of your webpage — image, message, ad — is to put a gradient-color border around it.

Borders with color gradients can be made in two steps:

1. Create a div with a gradient-color background.

2. Place a smaller div — the content div with a different color background — on top of the first div.

CSS is used, no JavaScript.

Here are two illustrations.

I'll describe step by step how to create the above.

Making a Gradient Color Border With CSS

The first step is: Create a div with a gradient-color background.

Your gradient color div can be any size you wish. The dimensions of the example are 250x250. (Use the CSS max-width property instead of the width property if you need a responsive div.)

The Basic div —

<div style="
    height:250px;
    width:250px;
    background:linear-gradient(to bottom right, red, orange, yellow, green, blue, indigo, violet);
    ">
</div>

The background:linear-gradient(…) CSS declaration is used to create a gradient of color. (An explanation of how gradients work is in the Willmaster Library about using gradients, CSS Color Gradients.)

The Rounded Corners —

Rounded corners are optional.

<div style="
    height:250px;
    width:250px;
    border-radius:20px;
    background:linear-gradient(to bottom right, red, orange, yellow, green, blue, indigo, violet);
    ">
</div>

The border-radius:20px; CSS declaration creates rounded corners. Adjust the 20px to whatever size rounded corner you want, or remove the entire declaration for no rounded corner.

The Border Width —

Instead of a border width, you specify a padding. The padding keeps the div with the content (in the next step) away from the edges by the amount of the padding. The result is a border for the content div.

Here is the code.

<div style="
    height:250px;
    width:250px;
    padding:20px;
    box-sizing:border-box;
    border-radius:20px;
    background:linear-gradient(to bottom right, red, orange, yellow, green, blue, indigo, violet);
    ">
</div>

The illustrations at the top of the article have 20-pixel borders. Thus, the padding is set to padding:20px;. Adjust the 20px to whatever border width you want.

The CSS box-sizing:border-box; declaration is important. The declaration keeps the dimensions of the div from expanding when padding is specified.

That's all for the first step. You have a div with a gradient-color background. It optionally has rounded corners. The specified padding determines the border width in the next step.

The second step is: Place a smaller div — the content div with a different color background — on top of the first div.

The Code for the First Illustration —

Here is the example and the complete code to create the first illustration at the top of this article. Notes follow.

<div style="
    height:250px;
    width:250px;
    border-radius:20px;
    padding:20px;
    box-sizing:border-box;
    background:linear-gradient(to bottom right, red, orange, yellow, green, blue, indigo, violet);
    ">
    <div style="
        height:100%;
        width:100%;
        border-radius:10px;
        background-color:white;
        /* Above is for div design. */
        /* Below is for div content. */
        padding-top:calc(50% - 60px);
        box-sizing:border-box;
        text-align:center;
        font-size:40px;
        line-height:100%;
        ">
        Gradient color border
    </div>
</div>

In the source code above, the first div is what you created at step one.

The content div is the div within the first div, the code colored green.

The height:100%; and width:100%; declarations are required.

The border-radius:10px; declaration is optional. If used, adjust the 10px according to the size of the rounded corner you prefer.

For the background-color:white; declaration, the property background-color is required and the value white may be changed.

All CSS declarations below the background-color:white; declaration are optional.

The Code for the Second Illustration —

Here is the example and the complete code to create the second illustration at the top of this article. As before, notes follow.

<div style="
    height:250px;
    width:250px;
    border-radius:20px;
    padding:20px;
    box-sizing:border-box;
    background:linear-gradient(to bottom right, red, orange, yellow, green, blue, indigo, violet);
    ">
    <div style="
        height:100%;
        width:100%;
        border-radius:10px;
        background-color:rgba(255,255,255,0.6666);
        /* Above is for div design. */
        /* Below is for div content. */
        padding-top:calc(50% - 54px);
        box-sizing:border-box;
        text-align:center;
        font-size:36px;
        line-height:100%;
        ">
        Partially opaque background
    </div>
</div>

The content and some of the content CSS changed. But the only CSS change for the div's style is background-color:rgba(255,255,255,0.6666); for the background color.

The rgba(…) color specification specifies the red, green, and blue values, and then, as the fourth value, how much opacity the resulting color shall have.

255,255,255 is the color white. 0.6666 is two-thirds opaque. (0 would be no opacity, meaning totally transparent, and 1 would be totally opaque, meaning nothing from underneath shows through.)

Now That It's Made

Now that you've made a couple gradient color border divs, you have a base upon which to create others.

Use these as guides. Make a copy of one and change its values to suit your purpose.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager