CODEWITHSUNDEEP
cssborder
JLeonard
JLeonard

Reputation: 9138

Two color borders

Client wants two color borders for an embossed look. Can I do this on one element? I was hoping to avoid stacking two DOM elements with individual borders.

Upvotes: 119

Views: 241802

Answers (13)

Tryskall
Tryskall

Reputation: 11

Easily use two colors by using a border on two dives

<div class="border-shadow">
    <div class="nav-bar">
                <!-- <a href="../home-page.html">HOME</a> -->
                <a class="a-no-underline"  href="page4.html">Apps</a>
    </div>
</div>

.border-shadow {
    border-top: 3px solid white;
    border-bottom: 3px solid black;
 }

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 3px solid black;
    border-bottom: 3px solid white;
 }

Upvotes: 1

BLBoyer
BLBoyer

Reputation: 38

Adding the following CSS properties to a border will achieve a double border of two distinct colors and identical widths for those who are interested.

Example:

Selector {
    border: 10px red;
    border-block-start-style: ridge;
    border-inline-start-style: ridge;
    border-inline-end-style: groove;
    border-block-end-style: groove;
}

Upvotes: 1

rkingon
rkingon

Reputation: 1073

This is very possible. It just takes a little CSS trickery!

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>

Is that what you are looking for?

Upvotes: 79

Karol Horosin
Karol Horosin

Reputation: 79

Instead of using unsupported and problematic outline just use

  • background-color + padding for the inner border
  • normal border for the outer one.

Example:

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

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

Upvotes: 7

Cotovanu Andrei
Cotovanu Andrei

Reputation: 199

Outline is good, but only when you want the border all around.

Lets say if you want to make it only on bottom or top you can use

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

And for bottom:

<style>

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

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

Hope that this helps.

Upvotes: 19

SorcyCat
SorcyCat

Reputation: 1216

This produces a nice effect.

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

Upvotes: -2

Gandalf
Gandalf

Reputation: 13683

You could use 

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

Upvotes: -1

Joel Glovier
Joel Glovier

Reputation: 7679

Have you tried the different border styles available within the CSS spec? There's already two border styles that might accommodate your need:

border-style: ridge;

Or

border-style: groove;

Upvotes: 20

Williham Totland
Williham Totland

Reputation: 28999

Yep: Use the outline property; it acts as a second border outside of your border. Beware, tho', it can interact in a wonky fashion with margins, paddings and drop-shadows. In some browsers you might have to use a browser-specific prefix as well; in order to make sure it picks up on it: -webkit-outline and the like (although WebKit in particular doesn't require this).

This can also be useful in the case where you want to jettison the outline for certain browsers (such as is the case if you want to combine the outline with a drop shadow; in WebKit the outline is inside of the shadow; in FireFox it is outside, so -moz-outline: 0 is useful to ensure that you don't get a gnarly line around your beautiful CSS drop shadow).

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

Edit: Some people have remarked that outline doesn't jive well with IE < 8. While this is true; supporting IE < 8 really isn't something you should be doing.

Upvotes: 158

Pekka
Pekka

Reputation: 449385

If by "embossing" you mean two borders around each other with two different colours, there is the outline property (outline-left, outline-right....) but it is poorly supported in the IE family (namely, IE6 and 7 don't support it at all). If you need two borders, a second wrapper element would indeed be best.

If you mean using two colours in the same border. Use e.g.

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

there are special border-styles for this as well (ridge, outset and inset) but they tend to vary across browsers in my experience.

Upvotes: 5

livibetter
livibetter

Reputation: 20450

Another way is to use 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>

See example here.

Upvotes: 40

Wasim Karani
Wasim Karani

Reputation: 8886

Simply write

style="border:medium double;"

for the html tag

Upvotes: -1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

Not possible, but you should check to see if border-style values like inset, outset or some other, accomplished the effect you want.. (i doubt it though..)

CSS3 has the border-image properties, but i do not know about support from browsers yet (more info at http://www.css3.info/preview/border-image/)..

Upvotes: -1

Related Questions