By mcbeav

2010-10-31 05:48:53 8 Comments

Is there a straight forward CSS way to make the border of an element semi-transparent with something like this?

border-opacity: 0.7;

If not, does anyone have an idea how I could do so without using images?


@Travis J 2020-06-12 20:46:23

No, there is no way to only set the opacity of a border with css.

For example, if you did not know the color, there is no way to only change the opacity of the border by simply using rgba().

@Breezer 2010-10-31 06:01:08

*Not as far as i know there isn't what i do normally in this kind of circumstances is create a block beneath with a bigger size((bordersize*2)+originalsize) and make it transparent using

-khtml-opacity: 0.5;
opacity: 0.5;

here is an example

    -khtml-opacity: 0.5;
    opacity: 0.5;
    margin:15px;/*size of border*/
<div id="main">
    <div class="border">
    <div class="content">


This answer is outdated, since after all this question is more than 8 years old. Today all up to date browsers support rgba, box shadows and so on. But this is a decent example how it was 8+ years ago.

@mcbeav 2010-10-31 06:06:01

Yeah that is what i ended up doing actually, it just sucks fudging with the positioning of the elements.

@Breezer 2010-10-31 06:08:57

added an example so you could see clearer how i was thinking :)

@Lee 2010-10-31 06:23:01

it can be done - but not with broad cross-browser support. However, chances are good that any browser that supports css opacity on background color would also support rgba(...) in border colors. you can try it out here.

@kingjeffrey 2010-10-31 06:41:05

@Lee, IE supports the "filter" opacity, but not any form of rgba (until IE9).

@Stephan Samuel 2018-02-13 23:47:38

As an alternate solution that may work in some cases: change the border-style to dotted.

Having alternating groups of pixels between the foreground color and the background color isn't the same as a continuous line of partially transparent pixels. On the other hand, this requires significantly less CSS and it is much more compatible across every browser without any browser-specific directives.

@A Malik 2012-02-14 06:31:59

try this:

<h2>Snippet for making borders transparent</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.

And here comes our magical CSS..

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;

b {
  font-weight: bold;

i {
  font-style: oblique;

H2 {
  font-size: 2em;

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;

Check out the Demo here.

@RBk 2015-07-10 15:01:45

Other answers deal with the technical aspect of the border-opacity issue, while I'd like to present a hack(pure CSS and HTML only). Basically create a container div, having a border div and then the content div.

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>

And then the CSS:(set content border to none, take care of positioning such that border thickness is accounted for)

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;

@Mark2090 2012-03-27 06:15:41

If you check your CSS coding with W3C validator, you will see if your CSS code is acceptable, even if it worked in the major browsers.

Creating a transparent border via CSS, as written above,

border: 1px solid rgba(255, 0, 0, .5);

is not accepted by W3C standards, not even for CSS3. I used the direct input validator with the following CSS code,

.test { border: 1px solid rgba(255, 0, 0, .5); }

The results were,

Value Error : border Too many values or values are not recognized : 1px solid rgba(255,0,0,0.5 )

Unfortunate that the alpha value (the letter "a" at the end of "rgb") is not accepted by W3C as part of the border color values as yet. I do wonder why it is not standardized, since it works in all browsers. The only hitch is whether you want to stick to W3C standards or step aside from it to create something in CSS.

To use W3C online CSS validator / Direct Input.

Always a good idea to use a validator to check your work, it really helps finding small or even large errors in coding when your going cross-eyed after hours of coding work.

@BoltClock 2012-03-27 06:21:05

Wrong, this is perfectly acceptable by W3C standards, and is a bug in the validator. See this answer. It's a good idea to use the validator, yes, but don't trust it for everything.

@Pedro L. 2012-07-04 15:55:36

It's 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

enter image description here

@Thomas Richter 2018-07-18 10:26:50

This will always work. Thanks for the snippet :) For everyone, who only wants to have a border to one or more sites you have to change the two first paramters like that box-shadow: -1px -1px 0px 0px rgba(0,0,0,0.1) to achieve e.g. border-top

@William 2019-05-13 18:23:09

This one should be used with caution! box-shadow has no size and can break your layout, making you margins uneven!

@kingjeffrey 2010-10-31 06:05:51

Unfortunately the opacity element 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 */

The problem with this approach is that some browsers do not understand the rgba format and will not display any border at all if this is the entire declaration. 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).

UPDATE: I've added "background-clip: padding-box;" to this answer (per SooDesuNe's suggestion in the comments) to ensure the border remains transparent even if a solid background color is applied.

@Breezer 2010-10-31 06:16:37

yeah and then we're back to the problem he first had ^^ "I thought about using rgba for the border-color, but it works very poorly across modern browsers." while my solutions works in pretty much all browsers

@kingjeffrey 2010-10-31 06:28:00

Actually, rgba works excellently in modern browsers (unless you think IE6-8 are "modern").

@Breezer 2010-10-31 06:36:47

well they're suppose to be :P and when you got 50%+ using them you should see to it that it works for ie aswell imo at least for ie7+

@kingjeffrey 2010-10-31 06:45:05

And that is why there is the "fake opacity" fall back. My life as a web designer became a lot easier when I accepted that not every browser needs to render identically. If they support border-radius, then they get rounded corners. If not, they don't. The content is still accessible, it still looks fine, it just looks better if they are using a capable browser. I've never had one client complain about this in the past 1.5 years of operating this way on every project.

@SooDesuNe 2011-08-27 16:37:36

If you're trying to get the content behind your bordered content to shine though (and NOT the background color of the bordered element itself), you'll need to set background-clip:padding-box; too.

@Ωmega 2012-07-10 23:46:58

For div, how can I set opacity for background-image but not for border, having border nice sharp?

@kingjeffrey 2012-07-11 21:13:51

@Ωmega, that is a great question that should be asked as it's own question, not here, so that others with your question will be able to find the answer.

@R Claven 2014-10-21 18:12:15

THANK YOU! You probably saved hours :)

@Lee 2010-10-31 06:20:12

As others have mentioned: CSS-3 says that you can use the rgba(...) syntax to specify a border color with an opacity (alpha) value.

here's a quick example if you'd 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.

There's also this stackoverflow post, which suggests some other issues--namely, that the border renders on-top-of any background color (or background image) that you've specified; thus limiting the usefulness of border alpha in many cases.

@kingjeffrey 2010-10-31 06:39:09

The border issue can be cured with background-clip: padding-box; (and until that is supported, you can use the -webkit and -moz vendor extensions).

@kingjeffrey 2010-10-31 06:55:12

I've added this answer to the question you've linked to.

Related Questions

Sponsored Content

28 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

32 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 2058338 View
  • 3205 Score
  • 32 Answer
  • Tags:   css css-selectors

33 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 1036843 View
  • 1931 Score
  • 33 Answer
  • Tags:   html css html-table

30 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1524321 View
  • 2287 Score
  • 30 Answer
  • Tags:   html css opacity

15 Answered Questions

[SOLVED] CSS 100% height with padding/margin

  • 2009-01-27 23:28:18
  • Toji
  • 335405 View
  • 814 Score
  • 15 Answer
  • Tags:   css

52 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

  • 2010-08-18 02:50:35
  • Hailwood
  • 1060635 View
  • 2153 Score
  • 52 Answer
  • Tags:   css css-transitions

36 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

  • 2014-05-09 16:16:57
  • Mathew MacLean
  • 243157 View
  • 2828 Score
  • 19 Answer
  • Tags:   javascript html css

Sponsored Content