Two color borders

by

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.

More Related Contents:

  1. what does "/" mean in css border-radius property? [duplicate]
  2. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  3. Border Gradient with Border Radius
  4. Remove white space below image [duplicate]
  5. How to remove the border highlight on an input text element
  6. How can I show only corner borders?
  7. Any way to declare a size/partial border to a box?
  8. CSS triangle custom border color
  9. Invert rounded corner in CSS?
  10. CSS Property Border-Color Not Working
  11. Control the dashed border stroke length and distance between strokes
  12. CSS: Margin-top when parent’s got no border
  13. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  14. Hover effect : expand bottom border
  15. How to create multi-color border with CSS?
  16. Should I use ‘border: none’ or ‘border: 0’?
  17. Double border with different color [duplicate]
  18. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  19. Border within border CSS
  20. What is the difference between outline and border CSS properties?
  21. CSS border less than 1px [duplicate]
  22. How to create multiple borders around existing border of circle [duplicate]
  23. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  24. CSS hover border makes elements adjust slightly
  25. Can I have different colored left and top borders in CSS?
  26. text flowing out of div
  27. Combining border-top,border-right,border-left,border-bottom in CSS
  28. Drawing border colors during a CSS transition
  29. input type=”image” shows unwanted border in Chrome and broken link in IE7
  30. Using CSS to make table’s outer border color different from cells’ border color

Leave a Comment