CODEWITHSUNDEEP
css
antonjs
antonjs

Reputation: 14318

Border color like firebug inspect element

I would like to reproduce the border color made by firebug when you try to inspect the DOM element in a web page.

It looks like the border around the text "Link2" of the following image.

enter link description here

The border around the text "Link" is what I did. The code is visible from this link. jsfiddle.

Can someone help me to write the css code to reproduce the border of Link2?

Thanks

Upvotes: 3

Views: 599

Answers (3)

GolezTrol
GolezTrol

Reputation: 116110

You'll need to use box-shadows, like this:

http://jsfiddle.net/GolezTrol/AEDsY/

.cl3 {
    -webkit-box-shadow: 0 0 3px 3px lightblue;
    -moz-box-shadow: 0 0 3px 3px lightblue;
    box-shadow: 0 0 3px 3px lightblue;
}

Upvotes: 3

nikmd23
nikmd23

Reputation: 9103

You would use something like this:

-webkit-box-shadow: 0px 0px 3px blue; /* Saf3-4 */
-moz-box-shadow: 0px 0px 3px blue; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 3px blue; /* Opera 10.5, IE9, FF4+, Chrome 10+ */

Check out http://css3please.com/ - it's a great resource for playing with new CSS properties.

Upvotes: 2

Rob W
Rob W

Reputation: 349042

That effect is achieved using the box-shadow css property.

To get as much support as possible, use -moz-box-shadow, -webkit-box-shadow and box-shadow.

To get your desired effect, use:

 -moz-box-shadow: 0 0 5px 2px blue;
 -webkit-box-shadow: 0 0 5px 2px blue;
 box-shadow: 0 0 5px 2px blue;

Upvotes: 2

Related Questions