CODEWITHSUNDEEP
css
Bryan B
Bryan B

Reputation: 4535

How to achieve this button-border effect with CSS? (image included)

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.

Upvotes: 1

Views: 3836

Answers (4)

Vin Burgh
Vin Burgh

Reputation: 1419

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/

Upvotes: 0

Blender
Blender

Reputation: 298166

As unintuitive as this sounds, don't use outline for outlines. Use box-shadow with a 1px spread:

box-shadow: 0px 0px 1px 1px #049ED9;

Demo: http://jsfiddle.net/Axtjm/4/

Upvotes: 5

Sufiyan Ghori
Sufiyan Ghori

Reputation: 18753

it is using border-radius property of CSS3 and simple CSS border techniques,

some of the border property,

solid   Specifies a solid border  
double  Specifies a double border  
groove  Specifies a 3D grooved border. The effect depends on the border-color value  
ridge   Specifies a 3D ridged border. The effect depends on the border-color value  
inset   Specifies a 3D inset border. The effect depends on the border-color value  
outset  Specifies a 3D outset border. The effect depends on the border-color value  
inherit     Specifies that the border style should be inherited from the parent element

and here is the border-radius in detail,

http://www.css3.info/preview/rounded-border/

Upvotes: 1

DA.
DA.

Reputation: 40673

The easiest option is to add the extra container element and give each a border.

But the challenge is to do it without the border. Some ideas:

  • use a border and then a very thin box-shadow.
  • use the border style attribute AND the outline style attribute

(both dependent on the browser supporting them)

Quick JSBIN demo: http://jsbin.com/irabul

Upvotes: 2

Related Questions