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?
Related Questions
Sponsored Content
36 Answered Questions
[SOLVED] Change an HTML5 input's placeholder color with CSS
- 2010-04-09 19:54:53
- David Murdoch
- 1711201 View
- 3884 Score
- 36 Answer
- Tags: html css html5 placeholder html-input
15 Answered Questions
[SOLVED] Managing CSS Explosion
- 2010-02-12 16:03:34
- JasCav
- 44111 View
- 681 Score
- 15 Answer
- Tags: css organization
27 Answered Questions
[SOLVED] Set cellpadding and cellspacing in CSS?
- 2008-12-04 08:45:47
- kokos
- 2248224 View
- 3222 Score
- 27 Answer
- Tags: html css html-table alignment
13 Answered Questions
[SOLVED] CSS 100% height with padding/margin
- 2009-01-27 23:28:18
- Toji
- 320211 View
- 793 Score
- 13 Answer
- Tags: css
28 Answered Questions
19 Answered Questions
[SOLVED] Is it possible to apply CSS to half of a character?
- 2014-05-09 16:16:57
- Mathew MacLean
- 236175 View
- 2723 Score
- 19 Answer
- Tags: javascript html css css3
31 Answered Questions
[SOLVED] Is there a CSS parent selector?
- 2009-06-18 19:59:36
- jcuenod
- 1863381 View
- 3004 Score
- 31 Answer
- Tags: css css-selectors
31 Answered Questions
[SOLVED] Make a div fill the height of the remaining screen space
- 2008-09-18 05:06:17
- Vincent McNabb
- 918984 View
- 1756 Score
- 31 Answer
- Tags: html css html-table
8 comments
@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
here is an example
Update:
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
todotted
.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:
And here comes our magical CSS..
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.
And then the CSS:(set content border to none, take care of positioning such that border thickness is accounted for)
@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,
is not accepted by W3C standards, not even for CSS3. I used the direct input validator with the following CSS code,
The results were,
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:
Also, if you set a border-radius to the element, it gives you pretty rounded borders
jsFiddle Demo
@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! jsfiddle.net/bj81hew7/2@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: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.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 setopacity
forbackground-image
but not forborder
, 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.