je recommande l'utilisation de 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;
  }

pour produire une bordure inset à l'intérieur d'un élément la seule solution que j'ai trouvée (et j'ai essayé toutes les suggestions dans ce thread en vain) est d'utiliser un pseudo-élément tel que: avant

E. G.

.has-inset-border:before {
  content: "foo"; /* you need something or it will be invisible at least on Chrome */
  color: transparent;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  width: 10px;
  border: 4px dashed red;
}

la propriété box-sizing ne fonctionnera pas, car la bordure finit toujours en dehors de tout.

Le box-shadow options a la double désavantages de ne pas vraiment travailler et de ne pas être pris en charge comme largement (et le coût plus de cycles CPU à rendre, si vous vous souciez).

c'est une vieille astuce, mais je trouve que la façon la plus facile de faire cela est d'utiliser un outline-offset avec une valeur négative (exemple ci-dessous utilise-6px). Voici un violon de celui-ci-j'ai fait 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>

Je ne sais pas à quoi vous vous comparez.

mais une façon très simple d'avoir une bordure en médaillon par rapport à d'autres articles non bordés est d'ajouter un border: ?px solid transparent; à tous les articles et non ont une bordure.

il fera l'article bordé regarder en médaillon.

http://jsfiddle.net/cmunns/cgrtd /

Si vous voulez vous assurer que la frontière est à l'intérieur de votre élément, vous pouvez utiliser

box-sizing:border-box;

ceci placera la frontière suivante à l'intérieur de l'élément:

border: 10px solid black;

(résultat similaire que vous obtiendriez en utilisant le paramètre additonal inset sur box-shadow, mais à la place celui-ci est pour la frontière réelle et vous pouvez toujours utiliser votre ombre pour autre chose.)

Note à une autre réponse ci-dessus: dès que vous utilisez n'importe quel inset sur box-shadow d'un certain élément, vous êtes limité à un maximum de 2 cases-ombres sur cet élément et exigerait un div enveloppant pour plus de shadowing.

les deux solutions devraient aussi bien vous débarrasser des effets 3D indésirables. Notez également que les deux solutions sont empilables (voir l'exemple que j'ai ajouté en 2018)

.example-border {
  width:100px;
  height:100px;
  border:40px solid blue;
  box-sizing:border-box;
  float:left;
}

.example-shadow {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  box-shadow:0 0 0 40px green inset;
}

.example-combined {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  border:20px solid orange;
  box-sizing:border-box;
  box-shadow:0 0 0 20px red inset;
}

<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>

si box-sizing n'est pas une option, une autre façon de le faire est juste de faire un enfant de l'élément de taille.

Démo

CSS

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
}
.border {
  border: 1px solid;
  display: block;
}
.medium { border-width: 10px; }
.large  { border-width: 25px; }

HTML

<div class="box">
  <div class="border small">A</div>
</div>
<div class="box">
  <div class="border medium">B</div>
</div>
<div class="box">
  <div class="border large">C</div>
</div>

vous pouvez utiliser background-clip: border-box;

exemple:

.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}

<div class="example">Example with background-clip: border-box;</div>

donc j'ai essayé de faire apparaître une bordure en stationnaire mais elle a déplacé toute la barre du bas du menu principal qui n'avait pas l'air si bien que je l'ai corrigé avec ce qui suit:

#top-menu .menu-item a:hover {
    border-bottom:4px solid #ec1c24;
    padding-bottom:14px !important;
}
#top-menu .menu-item a {
    padding-bottom:18px !important;
}

j'espère que cela aidera quelqu'un là-bas.

Simple SCSS solution avec les pseudo-éléments

Live demo: https://codepen.io/vlasterx/pen/xaMgag

// Change border size here
$border-width: 5px;

.element-with-border {
	display: flex;
	height: 100px;
	width: 100%;
	position: relative;
	background-color: #f2f2f2;
	box-sizing: border-box;
	
	// Use pseudo-element to create inset border
	&:before {
		position: absolute;
		content: ' ';
		display: flex;
		border: $border-width solid black;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: $border-width solid black;
		// Important: We must deduct border size from width and height
		width: calc(100% - $border-width); 
		height: calc(100% - $border-width);
	}
}

<div class="element-with-border">
  Lorem ipsum dolor sit amet
</div>

je sais que c'est trois ans, mais pensé qu'il pourrait être utile à quelqu'un.

le concept consiste à utiliser le sélecteur :after (ou :before) pour positionner une bordure à l'intérieur de l'élément parent.

    .container{
        position:relative; /*Position must be set to something*/
    }

    .container:after{
        position:relative;
        top: 0;
        content:"";
        left:0;
        height: 100%; /*Set pixel height and width if not defined in parent element*/
        width: 100%; 

        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;

        border:1px solid #000; /*set your border style*/

    }