Comment puis-je ajouter une bordure à l'intérieur de cet élément?

Question

Comment puis-je ajouter une bordure 1px solid rgba(255,255,255,0.6), 5pxà l'intérieur la suivante fieldset?

résultat devrait être quelque chose comme ceci:

Je ne ai besoin que cela soit compatible avec Chrome dernier, Firefox dernier et IE 9.

est ici un JSFiddle, et mon code actuel :

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

La hauteur et la largeur sont inconnus. Je viens de les ajouter ici pour remplir le fieldset.

Answer 1

Qu'en est-il d'un élément d'emballage? (JSFiddle)

Edité par OP: C'est ce que je fini par faire, puisque j'avais déjà un élément form 'emballage du 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; 
} 

Answer 2

Avec CSS normal, je ne pense pas qu'il existe une règle CSS en ligne pour cela. Vous avez box-shadow avec une partie en ligne, mais cela ne fonctionnera pas dans tous les navigateurs.

S'il vous plaît voir cette URL suivante: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/

Où vous pouvez utiliser :before et :after pour créer un autre élément à l'intérieur et position absolute si le contenu entier est sélectionné moins la largeur et la hauteur de la frontière.

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