Two color borders

Question

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

User · Answer

You could use    lt html gt   lt head gt   lt title gt Two Colors lt  title gt   lt style type  text css  gt    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      lt  style gt    lt style type  text css  gt        body           padding-top  20px          padding-bottom  40px          background-color yellow                       lt  style gt    lt  head gt   lt body gt   lt a target   blank  href  people htm  gt     lt img class  two-colors  src  people jpg  alt  Klematis  width  213  height  120    gt     lt  a gt    lt  body gt   lt  html gt

User · Answer

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      lt div id  mybox  gt ABC lt  div gt    See example here

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt  8  While this is true  supporting IE  lt  8 really isn t something you should be doing

User · Answer

This produces a nice effect    lt div style  border  1px solid gray  padding  1px  gt   lt div style  border  1px solid gray  gt     internal stuff  lt  div gt   lt  div gt

User · Answer

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   lt style gt      border-top     border-top  1px solid   ccc    box-shadow  inset 0 1px 0  fff     lt  style gt    lt p id  border-top  gt This is my content lt  p gt    And for bottom    lt style gt          border-bottom         border-top  1px solid   ccc        box-shadow  0 1px 0  fff         lt  style gt        lt p id  border-bottom  gt This is my content lt  p gt    Hope that this helps

User · Answer

This is very possible  It just takes a little CSS trickery    x000D   x000D  div border   x000D    border  1px solid  000  x000D    position  relative  x000D    x000D   x000D  div border before   x000D    position  absolute  x000D    display  block  x000D    content      x000D    border  1px solid red  x000D    height  100   x000D    width  100   x000D    box-sizing  border-box  x000D    -moz-box-sizing  border-box  x000D    -webkit-box-sizing  border-box  x000D    x000D   lt div class  border  gt Hi I have two border colors lt br   gt I am also Fluid lt  div gt  x000D   x000D   x000D    Is that what you are looking for

User · Answer

Simply write   style  border medium double     for the html tag

User · Answer

Instead of using unsupported and problematic outline just use    background-color   padding for the inner border normal border for the outer one    Example   HTML    lt img src  http   cdn3 thumbs common smcloud net common 8 6 s 863444wpPN jpg r-0 500-n-863444wpPN jpg  alt  malkovich    gt    CSS   img       padding  1px      background  yellow      border 1px solid black      TEST JSFiddle     x000D   x000D  img   x000D    padding  1px  x000D    background  yellow  x000D    border  1px solid black  x000D    x000D   lt img src  http   cdn3 thumbs common smcloud net common 8 6 s 863444wpPN jpg r-0 500-n-863444wpPN jpg  alt  malkovich    gt  x000D   x000D   x000D

[css] Two color borders

Examples related to css

Examples related to border