How can I set the opacity of border

Question

How to set the opacity of the border?

I want it to be transparent so that objects behind the border will be seen.

Check out http://stackoverflow.com/a/4062032/1305911 – JNF Sep 30 '13 at 08:25 — JNF, Sep 30 '13 at 08:25

score 2 · Answer 1 · answered Sep 30 '13 at 08:26

2

Try this,

border-color: rgba(0,0,0,0.5); // 50% opacity

The last value varies from 0 to 1. Where 0 is completely transparent and 1 is Opaque.

answered Sep 30 '13 at 08:26

Sarvap Praharanayuthan

4,025
7
46
70

1

30 seconds faster. +1 – Joren Sep 30 '13 at 08:29

score 1 · Answer 2 · answered Sep 30 '13 at 08:27

1

I think something like this should do the trick:

border: 10px solid rgba(255, 255, 255, 0.5);

More info: http://www.css3.info/preview/rgba/

answered Sep 30 '13 at 08:27

Joren

2,914
19
42

score 0 · Answer 3 · answered Sep 30 '13 at 08:29

0

You can use rgba format in modern browsers.

border: 2px solid rgba(0, 51, 255, 0.5)

You can use it in all modern browsers. Here's a list

answered Sep 30 '13 at 08:29

Jashwant

27,289
16
69
100

Tomzan · Answer 4 · 2013-09-30T19:00:48.893

0

You Can't Do it. because the "objects behind the borders" is the object itself.

check this Fiddle

edited Sep 30 '13 at 19:00

answered Sep 30 '13 at 08:31

Tomzan

2,738
13
24

score 0 · Answer 5 · answered Sep 30 '13 at 08:32

Choose any CSS colour function with an alpha channel:

rgba(RR, GG, BB, ALPHA) or hsla(HUE, SAT, LUM, ALPHA)

The alpha value is between 0 and 1.

You may also want to have a look into background-clip property for defining the position of the background in relation to the box-model of the element.

How can I set the opacity of border

5 Answers5