Bordes de dos colores

95

El cliente quiere bordes de dos colores para una apariencia en relieve. ¿Puedo hacer esto en un elemento? Esperaba evitar apilar dos elementos DOM con bordes individuales.

DrANoel
fuente
¿Está dispuesto a utilizar Javascript para lograr el efecto? jquery.malsup.com/corner
nopuck4you

Respuestas:

140

Sí: use la outlinepropiedad; actúa como una segunda frontera fuera de su frontera. Tenga cuidado, aunque puede interactuar de forma irregular con márgenes, rellenos y sombras. En algunos navegadores, es posible que también deba utilizar un prefijo específico del navegador; para asegurarse de que lo capta: -webkit-outliney similares (aunque WebKit en particular no lo requiere).

Esto también puede ser útil en el caso en el que desee descartar el contorno para ciertos navegadores (como es el caso si desea combinar el contorno con una sombra; en WebKit el contorno está dentro de la sombra; en FireFox es afuera, por lo que -moz-outline: 0es útil para asegurarse de que no obtenga una línea retorcida alrededor de su hermosa sombra de CSS).

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

Editar: Algunas personas han comentado que outlineno funciona bien con IE <8. Si bien esto es cierto; admitir IE <8 realmente no es algo que deba estar haciendo.

Williham Totland
fuente
27
-1 para "admitir IE <8 realmente no es algo que debas estar haciendo". No admitir IE6 puede estar bien. Pero no admitir IE7 es ridículo, ningún sitio con una audiencia no técnica puede permitirse esto
Pekka
6
outlineha existido desde CSS2.
BoltClock
156
+1 por no ser compatible con IE 7, aunque su sitio siempre debería funcionar y verse razonablemente bien en IE 7, no es necesario un soporte completo. especialmente si es solo un borde de dos colores. Personalmente estoy usando box-shadow y otras funciones "avanzadas". IE7 no puede ver una sombra de caja, ... gran cosa. no hay razón para usar una solución menos adecuada, demasiado complicada o incluso obsoleta, solo para evitar las peculiaridades de IE7.
Marian Theisen
2
Además, consulte esta referencia para obtener buenas razones de accesibilidad para NO piratear la propiedad de contorno con fines de diseño: outlinenone.com
Joel Glovier
11
Una advertencia, outlinees menos versátil que border. En particular, el W3C dice : "Nota. El contorno es el mismo en todos los lados. A diferencia de los bordes, no existe la propiedad 'outline-top' o 'outline-left' ". (El énfasis es mío.)
Bob Stein
68

Esto es muy posible. ¡Solo se necesita un pequeño truco CSS!

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
<div class="border">Hi I have two border colors<br />I am also Fluid</div>

¿Es esto lo que estás buscando?

rkingon
fuente
De hecho, es complicado, pero se degrada con gracia e incluso funciona en el navegador estándar de mi HTC (Android). Si lo usa border-radius, intente reducir el radio del borde interior en un píxel, eso hará que el espacio entre los dos bordes redondeados sea casi imperceptible.
gripe
Esto es bonito. Usar en bottom:1pxlugar de height:100%funcionó mejor para mí solo para un borde inferior :)
Nick
Si tiene un relleno para el div.border, descubrí que agregar un margen negativo con las mismas dimensiones para el div.border:before, ayudó a mantener todo en línea. ¿Quizás haya una mejor manera de hacerlo? jsFiddle
NW Tech
+1 por usar pseudoelementos. Creo que esta respuesta es mejor que la de Williham Totland
Matías Cánepa
¡Esto es genial! :)
BennKingy
33

Otra forma es usar box-shadow:

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

Vea el ejemplo aquí.

Livibetter
fuente
Prefiero esto porque funciona con border-radius a diferencia del método de contorno
Johan
18

¿Ha probado los diferentes estilos de borde disponibles dentro de la especificación CSS? Ya existen dos estilos de borde que pueden adaptarse a sus necesidades:

border-style: ridge;

O

border-style: groove;
Joel Glovier
fuente
1
Eso era exactamente lo que necesitaba. (Arreglando <fieldset> en IE8)
DOOManiac
14

El contorno es bueno, pero solo cuando desea el borde alrededor.

Digamos que si desea hacerlo solo en la parte inferior o superior, puede usar

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

Y para el fondo:

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

Espero que esto ayude.

Cotovanu Andrei
fuente
6

En lugar de utilizar un esquema problemático y no compatible, utilice

  • color de fondo + relleno para el borde interior
  • borde normal para el exterior.

Ejemplo:

HTML:

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS:

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

PRUEBA (JSFiddle) :

Karol Horosin
fuente
Funciona bien, pero solo si tiene contenido con antecedentes.
Culme
4

Si por "relieve" te refieres a dos bordes uno alrededor del otro con dos colores diferentes, existe la outlinepropiedad ( outline-left, outline-right....) pero no es compatible con la familia IE (es decir, IE6 y 7 no lo admiten en absoluto ). Si necesita dos bordes, un segundo elemento de envoltura sería lo mejor.

Si te refieres a usar dos colores en el mismo borde. Utilice por ejemplo

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

también hay especiales border-stylespara esto ( ridge, outsety inset) pero, en mi experiencia, tienden a variar según el navegador.

Pekka
fuente
3
Creo que lo que está preguntando es algo así como border : black white; definir dos colores diferentes para un borde que se ve secuencialmente al mismo tiempo.
Tarik
1
@Braveyard ah, ya veo. Eso sería teóricamente posible usarlo, outlinepero no funcionará bien en IE <8
Pekka
3
Tenga en cuenta que solo hay contorno ... desafortunadamente, no existe contorno-izquierdo, contorno-derecho, contorno-superior o contorno-inferior.
David Sherret
-1

No es posible, pero debe verificar si border-stylevalores como inset, outseto algún otro, lograron el efecto que desea ... ( aunque lo dudo ... )

CSS3 tiene las propiedades de imagen de borde , pero aún no conozco el soporte de los navegadores (más información en http://www.css3.info/preview/border-image/ ).

Gabriele Petrioli
fuente
Nada es imposible en el mundo de la programación: P, bueno, me gusta hacer esta declaración todo el tiempo :)
Tarik
-1

Simplemente escribe

style="border:medium double;"

para la etiqueta html

Wazy
fuente
1
Eso da dos bordes con un solo color entre ellos.
Williham Totland
-1

Podrías usar

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>
Gandalf
fuente
-2

Esto produce un efecto agradable.

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>
SorcyCat
fuente