Bordas de duas cores

O cliente deseja bordas de duas cores para uma aparência em relevo. Posso fazer isso em um elemento? Eu esperava evitar empilhar dois elementos DOM com bordas individuais.

Sim: Use a outlinepropriedade; ele atua como uma segunda fronteira fora de sua fronteira. Cuidado, embora ele possa interagir de maneira instável com margens, preenchimentos e sombras projetadas. Em alguns navegadores, pode ser necessário usar um prefixo específico do navegador também; para ter certeza de que ele pega nele: -webkit-outlinee assim por diante (embora o WebKit em particular não exija isso).

Isso também pode ser útil no caso em que você deseja descartar o contorno de certos navegadores (como é o caso se você deseja combinar o contorno com uma sombra projetada; no WebKit o contorno está dentro da sombra; no FireFox é fora, então -moz-outline: 0é útil para garantir que você não obtenha uma linha nodosa ao redor de sua bela sombra CSS).

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

Edit: Algumas pessoas observaram que outlinenão funciona bem com o IE <8. Embora isso seja verdade; apoiar o IE <8 realmente não é algo que você deveria fazer.

Isso é muito possível. É necessário apenas alguns truques de 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>

É isso que você está procurando?

Outra maneira é 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>

Veja o exemplo aqui.

Você experimentou os diferentes estilos de borda disponíveis nas especificações CSS? Já existem dois estilos de borda que podem atender às suas necessidades:

border-style: ridge;

Ou

border-style: groove;

Contorno é bom, mas apenas quando você quer a borda ao redor.

Digamos que se você quiser fazer apenas na parte inferior ou superior, você pode 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>

E para baixo:

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

Em vez de usar contornos sem suporte e problemáticos, use

• cor de fundo + preenchimento para a borda interna
• borda normal para o externo.

Exemplo:

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

TESTE (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" />

Se por "relevo" você quer dizer duas bordas em torno uma da outra com duas cores diferentes, existe a outlinepropriedade ( outline-left, outline-right....), mas é mal suportada na família IE (ou seja, IE6 e 7 não suportam de todo ) Se você precisar de duas bordas, um segundo elemento de invólucro seria de fato melhor.

Se você quer dizer usar duas cores na mesma borda. Use por exemplo

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

existem especial border-stylespara isso também ( ridge, outsete inset), mas eles tendem a variar entre os navegadores na minha experiência.

Não é possível, mas você deve verificar se border-stylevalores como inset, outsetou algum outro, alcançaram o efeito que você deseja .. ( eu duvido .. )

CSS3 tem propriedades de imagem de borda , mas eu não sei sobre o suporte de navegadores ainda (mais informações em http://www.css3.info/preview/border-image/ ) ..

Simplesmente escreva

style="border:medium double;"

para a tag html

Você poderia 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>

Isso produz um bom efeito.

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