Bordures incrustées CSS

Question

J'ai besoin de créer une bordure incrustée de couleur unie. C'est le peu de CSS que j'utilise :

 border: 10px inset rgba(51,153,0,0.65);

Malheureusement, cela crée une bordure striée 3D (ignorez les carrés et la zone de description sombre)

Answer 1

Je recommanderais d'utiliser box-sizing .

 *{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#bar{
  border: 10px solid green;
  }

Answer 2

Pour produire un encart de bordure dans un élément, la seule solution que j'ai trouvée (et j'ai essayé toutes les suggestions de ce fil en vain) est d'utiliser un pseudo-élément tel que :before

Par exemple

 .has-inset-border:before {
  content: " "; /* to ensure it displays */
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border: 4px dashed red;
  pointer-events: none; /* user can't click on it */
}

La propriété de dimensionnement de la boîte ne fonctionnera pas, car la bordure finit toujours à l'extérieur de tout.

Les options box-shadow ont le double inconvénient de ne pas vraiment fonctionner et de ne pas être prises en charge aussi largement (et de coûter plus de cycles CPU à rendre, si vous vous en souciez).

Answer 3

C'est une vieille astuce, mais je trouve toujours que le moyen le plus simple de le faire est d'utiliser un décalage de contour avec une valeur négative (l'exemple ci-dessous utilise -6px). En voici un violon : j'ai rendu la bordure extérieure rouge et le contour blanc pour différencier les deux :

 .outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}

<div class="outline-offset"></div>