Bordes de dos colores

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.

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.

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?

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

¿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;

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.

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) :

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

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

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.

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

Simplemente escribe

style="border:medium double;"

para la etiqueta html

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>

Esto produce un efecto agradable.

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