Question

How can I add a 1px solid rgba(255,255,255,0.6) border, 5px inside the following fieldset?

Result should be something like this:

I only need this to be compatible with Chrome latest, Firefox latest, and IE 9.

Here’s a JSFiddle, and my current code:

HTML

<fieldset>&nbsp;</fieldset>

CSS

fieldset
{
    background: #3AA0BD;
    background: -moz-linear-gradient(top, #3AA0BD 0%, #06446E 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3AA0BD), color-stop(100%,#06446E));
    background: -webkit-linear-gradient(top, #3AA0BD 0%,#06446E 100%);
    background: -o-linear-gradient(top, #3AA0BD 0%,#06446E 100%);
    background: -ms-linear-gradient(top, #3AA0BD 0%,#06446E 100%);
    background: linear-gradient(to bottom, #3AA0BD 0%,#06446E 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3AA0BD', endColorstr='#06446E',GradientType=0 );
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    display: inline-block;
    padding: 20px;
    /* temp */
    height: 60px;
    width: 500px;
}

The height and width are unknown. I’ve just added them here to fill out the fieldset.

Answer 1

What about a wrapping element? (JSFiddle)

Edited by OP: This is what I ended up doing, since I already had a form element ‘wrapping’ the fieldset:

HTML

<form>
    <fieldset>&nbsp;</fieldset>
</form>

CSS

form
{
    background: #3AA0BD;
    background: -moz-linear-gradient(top, #3AA0BD 0%, #06446E 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3AA0BD), color-stop(100%,#06446E));
    background: -webkit-linear-gradient(top, #3AA0BD 0%,#06446E 100%);
    background: -o-linear-gradient(top, #3AA0BD 0%,#06446E 100%);
    background: -ms-linear-gradient(top, #3AA0BD 0%,#06446E 100%);
    background: linear-gradient(to bottom, #3AA0BD 0%,#06446E 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3AA0BD', endColorstr='#06446E',GradientType=0 );
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    display: inline-block;
    padding: 5px;
}

fieldset
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.6);
    padding: 20px;
}