CODEWITHSUNDEEP
bordercss
Danny Beckett
Danny Beckett

Reputation: 20866

How can I add a border INSIDE this element?

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:

a

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.

Upvotes: 0

Views: 201

Answers (2)

Arne Cordes
Arne Cordes

Reputation: 581

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;
}

Upvotes: 2

Niels
Niels

Reputation: 49949

With normal CSS I don't think there is a inline CSS rule for this. You got box-shadow with an inline part, but this won't work in every browser.

Please see this following URL: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/

Where you can use :before and :after to create another element inside and position absolute it so the whole content is selected minus the width and height of the border.

    #box {  
        background: #f4f4f4;  
        border: 1px solid #bbbbbb;  
        width: 200px;  
        height: 200px;  
        margin: 60px auto;  
        position: relative;  
    }  
    #box:before {  
        border: 1px solid white;  
        content: '';  
        width: 198px;  
        height: 198px;  
        position: absolute;  
    }  
    #box:after {  
        content: '';  
        position: absolute;  
        width: 196px;  
        height: 196px;  
        border: 1px solid #bbbbbb;  
        left: 1px; top: 1px;  
    }

Upvotes: 2

Related Questions