html - rounded - Bordes incrustados de CSS

div border html

Question

Tengo una pregunta rápida sobre los bordes de CSS.

Necesito crear un borde de recuadro de color sólido. Este es el bit de CSS que estoy usando:

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

Lamentablemente, eso crea un borde surcado en 3D (ignore los cuadrados y el cuadro de descripción oscura):

http://dl.dropbox.com/u/12147973/border-current.jpg

Este es el objetivo:

http://dl.dropbox.com/u/12147973/border-boal.jpg

¿Algunas ideas?

Answer 1

Así que estaba tratando de que apareciera un borde al pasar el mouse pero movió toda la barra inferior del menú principal, que no se veía tan bien, lo arreglé con lo siguiente:

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

Espero que esto ayude a alguien por ahí.

Answer 2

Es un viejo truco, pero todavía encuentro que la manera más fácil de hacer esto es usar outline-offset con un valor negativo (el siguiente ejemplo usa -6px). Aquí hay un fiddle : hice el borde exterior rojo y el contorno blanco para diferenciar los dos:

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

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

Answer 3

No sé a qué se está comparando.

Pero una manera súper sencilla de tener un recuadro con apariencia de borde en comparación con otros elementos no delimitados es agregar un border: ?px solid transparent; a cualquier elemento que no tenga un borde.

Hará que el elemento delimitado parezca insertado.

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

Answer 4

Para producir un recuadro de borde dentro de un elemento, la única solución que he encontrado (y he intentado todas las sugerencias en este hilo inútilmente) es usar un pseudo-elemento como: antes

P.ej

.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 propiedad de tamaño de caja no funcionará, ya que el borde siempre termina fuera de todo.

Las opciones de sombreado de caja tienen la doble desventaja de no funcionar realmente y de no ser admitidas en la misma medida (y cuestan más ciclos de CPU para renderizar, si te importa).

Answer 5

Podría usar box-shadow , posiblemente:

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 10px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 10px #0f0;
}

<div id="something"></div>

Esto tiene la ventaja de que se superpondrá a la imagen de fondo del div , pero, por supuesto, está borrosa (como cabría esperar de la propiedad box-shadow ). Para aumentar la density de la sombra, puedes agregar sombras adicionales, por supuesto:

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

<div id="something"></div>

Editado porque me di cuenta de que soy un idiota y olvidé ofrecer la solución más simple primero , que es utilizar un elemento secundario vacío para aplicar los bordes sobre el fondo:

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  padding: 0;
  position: relative;
}
#something div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(0, 255, 0, 0.6);
}

<div id="something">
  <div></div>
</div>

Editado después del comentario de @CoryDanielson, a continuación :

jsfiddle.net/dPcDu/2 puede agregar un cuarto parámetro de px para la box-shadow que hace la extensión y reflejará más fácilmente sus imágenes.

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}

<div id="something"></div>

Answer 6

Puede usar background-clip: border-box;

Ejemplo:

.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>

Answer 7

Sé que esto tiene tres años, pero pensé que podría ser útil para alguien.

El concepto es utilizar el selector: after (o: before) para colocar un borde dentro del elemento principal.

    .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*/

    }

Answer 8

Si box-sizing no es una opción, otra forma de hacerlo es simplemente hacer que sea un elemento secundario del tamaño.

Demo

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>

Answer 9

Si quiere asegurarse de que el borde esté en el interior de su elemento, puede usar

box-sizing:border-box;

esto colocará el siguiente borde en el interior del elemento:

border: 10px solid black;

(Se obtendría un resultado similar utilizando el inset parámetro adicional en la sombra de cuadro, pero en cambio este es para el borde real y aún puede usar su sombra para otra cosa).

Nota a otra respuesta anterior: tan pronto como utilice cualquier inset en box-shadow de box-shadow de un elemento determinado, está limitado a un máximo de 2 sombras de cuadro en ese elemento y requeriría un div envoltorio para sombreado adicional.

Answer 10

Yo recomiendo usar 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;
  }