Home/ Questions/Q 7408787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:58:25+00:00

Right now, our mockups / live demo use images to achieve this effect (including

  • 0

enter image description here

Right now, our mockups / live demo use images to achieve this effect (including button text). This is less than desirable for all of the standard reasons. I can get everything working except that pesky outer border. I’d really like to not add markup to my document just to have that.

I’ve got my test code on jsfiddle, although it doesn’t work as well there as it does on my local machine: http://jsfiddle.net/Axtjm/

tldr: how to add inset border like that and keep rounded corners without extra markup.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use an inset box-shadow. If you’re already using a box-shadow on your buttons, remember that you can stack box-shadows by using commas to separate each.

    button {
 border: 1px solid #369;
 box-shadow: inset 0 0 1px #fff, 1px 1px 2px #000;
}

    The above is just an example; replace the values with your own if necessary. If you want a bolder inset shadow, you can also stack two insets of the same value to achieve that.

    Live example: http://jsfiddle.net/Axtjm/5/

    • 0