Can you set a border opacity in CSS?

Can you set a border opacity in CSS?

Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

For extremely old browsers that dont support rgba (IE8 and older), the solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

The first border declaration will be the equivalent color to a 50% opaque red border over a white background (although any graphics under the border will not bleed through).

Ive added background-clip: padding-box; to the examples above to ensure the border remains transparent even if a solid background color is applied.

Its easy, use a solid shadow with 0 offset:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

Also, if you set a border-radius to the element, it gives you pretty rounded borders

jsFiddle Demo

Can you set a border opacity in CSS?

As others have mentioned, CSS3 supports the rgba(...) syntax to specify a border color with an opacity (alpha) value.

Heres a quick JSFiddle demo if youd like to check it.

• It works in Safari and Chrome (probably works in all webkit browsers).

• It works in Firefox

• I doubt that it works at all in IE, but I suspect that there is some filter or behavior that will make it work.

Theres also CSS RGBA border / background alpha double, which suggests some other issues—namely, that the border renders on-top-of any background color (or background image) that youve specified; thus limiting the usefulness of border alpha in many cases.