Two color borders

Question

Two color borders

The client wants two color borders for the relief image. Can I do this on one element? I was hoping to avoid stacking two DOM elements with separate borders.

+83

css border

DrANoel Oct 11 2018-10-10

source share

11 answers

Williham Totland · Answer 1 · 2010-10-11 14:17

Yep: use the outline property; it acts like a second border beyond your border. Beware tho 'he can interact in a winning manner with margins, paddings and drop-shadows. In some browsers, you may have to use a browser prefix; to make sure he types this: -webkit-outline and the like (although WebKit in particular does not require this).

It can also be useful if you want to reset the scheme for certain browsers (for example, if you want to combine the outline with shadow shadow printing, and in WebKit the outline is inside the shadow; FireFox is outside, so -moz-outline: 0 is useful to make sure you don't get a gnarly string around a beautiful CSS shadow).

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

Edit: Some people have noted that outline does not do very well with IE <8. Although this is true; supporting IE <8 is really not what you should be doing.

rkingon · Answer 2 · 2011-09-30 19:37

It is very possible. It just takes a bit of CSS cheating!

jsFiddle

 <div class="border"> Hi I have two border colors<br /> I am also Fluid </div>

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

Is this what you are looking for?

livibetter · Answer 3 · 2010-10-11 14:27

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 an example here.

Joel Glovier · Answer 4 · 2010-10-11 17:27

Have you tried the different border styles available in the CSS spec? There are already two border styles that can suit your needs:

 border-style: ridge;

or

 border-style: groove;

Cotovanu Andrei · Answer 5 · 2013-09-03 06:44

The outline is good, but only when you want the border to be around.

Suppose that if you want to do this only from below or from above, 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 the 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 this helps.

Karol Horosin · Answer 6 · 2012-09-13 17:23

Instead of using unsupported and problematic schemes just use

background-color + padding for inner border
normal border for the outside.

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): http://jsfiddle.net/68gb7/

Pekka 웃 · Answer 7 · 2010-10-11 14:13

If in “embossing” you mean two borders with each other with two different colors, the outline property ( outline-left , outline-right ....) exists, but it is poorly supported in the IE family (namely, IE6 and 7 don't support him at all). If you need two borders, the second shell element will really be better.

If you mean using two colors on the same border. Use for example

 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 ( ridge , outset and inset ), but they tend to change in different browsers in my experience.

Gaby aka G. Petrioli · Answer 8 · 2010-10-11 14:17

Impossible, but you have to check if border-style values, such as inset , outset or some others, can perform the effect you want .. (I doubt though ..)

CSS3 has border-image properties, but I don’t know about browser support yet (more details at http://www.css3.info/preview/border-image/ ) ..

Wazzzy · Answer 9 · 2010-10-11 14:23

Just write

style="border:medium double;"

for html tag

Gandalf · Answer 10 · 2012-05-07 17:55

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

SorcyCat · Answer 11 · 2012-08-02 18:34

This creates a pleasant effect.

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

Two color borders

More articles: