Inner border CSS - Possible

Question

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

Answer 1

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