5

I was wondering if there is a property for setting outer and inner border for an element, for example I want to have dark grey border as outer border and white as inner border.. I have attached an image to make my point clear, I can do this with having 2 layer, one as parent with dark grey border and another as child with white border, but there must be a better and effective ways. Please guide if you have the right concept of achieving this.. Thanks for your time.. cheersenter image description here

user1718343
  • 725
  • 2
  • 9
  • 18
  • possible duplicate of [simulate "inner border" in CSS?](http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css) – Wesley Murch Mar 28 '14 at 20:30
  • possible duplicate of [CSS Border Inside Div not on edge](http://stackoverflow.com/questions/9601357/css-border-inside-div-not-on-edge) – Wesley Murch Mar 28 '14 at 20:30
  • possible duplicate of [CSS Inset Borders](http://stackoverflow.com/questions/8452739/css-inset-borders) – Wesley Murch Mar 28 '14 at 20:32

2 Answers2

14

You can use an inset box-shadow. DEMO

button {
    border: solid 1px #aaa;

    // Adds the inner "border"
    box-shadow: 0 0 1px #fff inset;

    background-image: linear-gradient(to bottom, #cfcfcf 0%, #c0c0c0 100%);
    padding: 20px;
    border-radius: 10px;
}

If you want to set the "width" of the border you can use a fourth value. Example with 3px wide inset box-shadow:

box-shadow: 0 0 0 3px #fff inset;

More info on box-shadows, MDN

Mathias
  • 5,642
  • 2
  • 31
  • 46
0

Use a CSS3 gradient instead. Leave your outer border and make a stop a few pixels from the edge. You can experiment with it here:

http://www.colorzilla.com/gradient-editor/

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Would only work for top/bottom or left/right borders though, right? I bet the code to achieve this using this method looks nasty.... – Wesley Murch Mar 28 '14 at 20:35