html - tablas - Colocando borde dentro de div y no en su borde

sombra texto css

Question

Tengo un elemento <div> y quiero ponerle un borde. Sé que puedo escribir style="border: 1px solid black" , pero esto agrega 2px a cada lado del div, que no es lo que quiero.

Prefiero que este borde sea -1px desde el borde del div. El div en sí es 100px x 100px, y si agrego un borde, entonces tengo que hacer algunas matemáticas para hacer que aparezca el borde.

¿Hay alguna forma en que pueda hacer que aparezca el borde y asegurar que el cuadro seguirá siendo de 100 px (incluido el borde)?

Answer 1

Si utiliza el tamaño de cuadro: cuadro de borde significa no solo borde, relleno, margen, etc. Todo el elemento entrará dentro del elemento principal.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

Answer 2

Establezca la propiedad de box-sizing border-box :

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

Funciona en IE8 y superior .

Answer 3

La mejor solución de navegador cruzado (en su mayoría para compatibilidad con IE) como @Steve dijo es hacer un div 98px de ancho y alto que agregar un borde de 1px a su alrededor, o podrías hacer una imagen de fondo para div 100x100 px y dibujar un borde en él.

Answer 4

Probablemente sea una respuesta tardía, pero quiero compartir con mis conclusiones. Encontré 2 enfoques nuevos para este problema que no he encontrado aquí en las respuestas:

Borde interno a través box-shadow propiedad box-shadow css

Sí, box-shadow se utiliza para agregar box-shadows a los elementos. Pero puede especificar una sombra inset , que se vería como un borde interior en lugar de una sombra. Solo debe configurar las sombras horizontales y verticales en 0px , y la propiedad " spread " de la box-shadow en el ancho del borde que desea tener. Entonces, para el borde ''interno'' de 10px escribirías lo siguiente:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

Aquí está el ejemplo de jsFiddle que ilustra la diferencia entre el borde de la box-shadow borde "normal". De esta manera, su borde y el ancho de la caja son de 100 px, incluido el borde.

Más sobre box-shadow: here

Borde a través del contorno de la propiedad css

Aquí hay otro enfoque, pero de esta manera el borde estaría fuera de la caja. Aquí hay un ejemplo . Como se muestra en el ejemplo, puede usar la propiedad de outline css para establecer el borde que no afecta el ancho y la altura del elemento. De esta manera, el ancho del borde no se agrega al ancho de un elemento.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

Más sobre el esquema: here

Answer 5

Puede usar el esquema de la propiedad y el valor de compensación del contorno en negativo, wor para mí:

outline: 2px solid red;
outline-offset: -2px;

Answer 6

Sé que esto es algo más antiguo, pero como las palabras clave "borde interior" me aterrizaron directamente aquí, me gustaría compartir algunos hallazgos que vale la pena mencionar aquí. Cuando estaba agregando un borde en el estado de desplazamiento, obtuve los efectos de los que habla OP. El borde de los anuncios de píxeles a la dimensión de la caja que lo hizo saltar. Hay dos maneras más en que uno puede lidiar con esto que también funciona para IE7.

1) Tener un borde ya unido al elemento y simplemente cambiar el color. De esta manera las matemáticas ya están incluidas.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) Compense su borde con un margen negativo. Esto aún agregará los píxeles adicionales, pero la posición del elemento no será rápida

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

Answer 7

Si bien esta pregunta ya se ha respondido adecuadamente con soluciones que utilizan las propiedades box-shadow y outline , me gustaría ampliar esto para todos aquellos que han llegado aquí (como yo) en busca de una solución para un borde interior con un desplazamiento

Entonces, digamos que tiene un div negro de 100px x 100px y necesita insertarlo con un borde blanco, que tiene un desplazamiento interno de 5px (por ejemplo), esto todavía puede hacerse con las propiedades anteriores.

box-shadow

El truco aquí es saber que se permiten varias sombras de cuadro, donde la primera sombra está en la parte superior y las sombras subsiguientes tienen un orden z más bajo.

Con ese conocimiento, la declaración box-shadow será:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

Básicamente, lo que está diciendo esa declaración es: renderizar primero la última sombra (10px blanca), luego renderizar la anterior sombra negra 5px sobre ella.

outline con outline-offset

Para el mismo efecto que el anterior, las declaraciones de esquema serían:

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

NB: IE no admite el outline-offset si eso es importante para usted.

Demo de codepen

Answer 8

También puedes usar box-shadow así:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

Ejemplo aquí: http://jsfiddle.net/nVyXS/ ( http://jsfiddle.net/nVyXS/ mouse para ver el borde)

Esto funciona solo en los navegadores modernos. Por ejemplo: No hay soporte para IE 8. Ver caniuse.com (característica box-shadow) para más información.

Answer 9

Use pseudoelemento :

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '''';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class=''button''>Hello</div>

Usando ::after estilizar el último elemento virtual del elemento seleccionado. content propiedad de content crea un elemento reemplazado anónimo.

Estamos conteniendo el pseudo elemento utilizando la posición absoluta con respecto al padre. Entonces tiene la libertad de tener cualquier fondo y / o borde personalizado en el fondo de su elemento principal.

Este enfoque no afecta la colocación de los contenidos del elemento principal, que es diferente de usar box-sizing: border-box; .

Considera este ejemplo:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class=''parent''>
    <div class=''button''>Hello</div>
</div>

Aquí el ancho de los .button se restringe usando el elemento padre. La configuración del border-left-width del border-left-width ajusta el tamaño del cuadro de contenido y, por lo tanto, la posición del texto.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '''';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class=''parent''>
    <div class=''button''>Hello</div>
</div>

El uso del enfoque de pseudo-elementos no afecta el tamaño del cuadro de contenido.

Dependiendo de la aplicación, el enfoque utilizando un pseudo-elemento puede o no ser un comportamiento deseable.

Answer 10

Yahoo! Esto es realmente posible. Lo encontré.

Para el borde inferior:

div {box-shadow: 0px -3px 0px red inset; }

Para el borde superior:

div {box-shadow: 0px 3px 0px red inset; }

Answer 11

para una representación consistente entre los navegadores nuevos y antiguos, agregue un contenedor doble, el exterior con el ancho, el interno con el borde.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

esto es obviamente solo si su ancho preciso es más importante que tener un margen de beneficio adicional.