Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Transparent borders with CSS3

Posted on by Clive Walker in CSS CSS3

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

I’ve seen a few website examples recently (like this one) where transparent borders have been used so that the background image shows through the border. I think this is a really nice effect and it got me wondering how it’s done and if I could use this on my planned redesign of CVW Web Design. Turns out it’s relatively simple but there’s one ‘trick’ you will need to get it to work.

Transparent border screenshot

Firstly, here’s my demo page with a <div> content area and a transparent border that allows the background cork board pattern to show through.

The border transparency is achieved using the rgba property which allows you to specific three rgb color values and a value for alpha (transparency). In my demo CSS, I’ve set the border property values like this:

div {
	border: 10px solid rgb(100, 100, 100); /* default color */
	border: 10px solid rgba(0, 0, 0, 0.3); /* rgba for transparency */
}

In this case I set a default grey color for browsers without rgba support and follow that with the rgba rule for more modern browsers. I used black with an alpha value of 0.3.

However, if we use these rules on their own, the background color (white) of the <div> element will be underneath the border and it will show through, thus making the borders non-transparent. The specific CSS for the background color is below. I’ve also added some padding, just to space things out a bit for the demo.

div {
        padding: 3em;
	background-color: rgb(255, 255, 255); /*background color, white*/
}

Here’s a demo showing the background color problem (the borders are not transparent). To get round this problem, what we need is a CSS property that will ‘clip’ the content area so that the <div> background-color is not underneath the border – therefore allowing our transparent borders to be just that – transparent!

That property is background-clip which can have several different values depending on where you want to clip the background. In my case, I want to clip the background at the border. To achieve this, rather confusingly, I need to give the background-clip property a value of padding-box and also provide the -moz- and -webkit- prefixes for browsers that use their own implementation. Here’s what I have used:

div {
	-moz-background-clip: padding; /* for Mozilla browsers*/
	-webkit-background-clip: padding;   /* Webkit */
	background-clip: padding-box; /*  browsers with full support */
}

My demo page has the full CSS with everything combined into one declaration block. Like this:

div {
	padding: 3em;
	background-color: rgb(255, 255, 255);
	border: 10px solid rgb(100, 100, 100); 
	border: 10px solid rgba(0, 0, 0, 0.3); 
	-moz-background-clip: padding; 
	-webkit-background-clip: padding; 
	background-clip: padding-box; 
}

Most modern browsers (including Internet Explorer 9) support rgba and background-clip in one form or another but Internet Explorer 6, 7 and 8 do not. You may choose to provide alternative border property values in a conditional commented style sheet for these browsers.

Modern browsers, transparent borders. I love ‘em!

More: CSS Tricks has a great article on transparent borders with background-clip and Impressive Webs explains background-clip in CSS3

Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Comments

  • 20 May 2011 12:40:37

    Very informative post. I am recently into web design. Hope ur post help me sooner or later. Thank u very much for sharing. Keep posting.

  • 30 May 2011 14:45:44

    Good work mate!!
    Very interesting.. Thanks for sharing.

  • 23 Jun 2011 17:11:07

    you have an error for these code:
    div { padding: 3em; background-color: rgb(255, 255, 255); border: 10px solid rgb(100, 100, 100); border: 10px solid rgba(0, 0, 0, 0.3); -moz-background-clip: padding; -webkit-background-clip: padding; /*Webkit not has padding*/ background-clip: padding-box;
    }

  • 26 Jun 2011 15:01:43

    Airen, I wasn’t aware that Webkit’s implementation of background-clip has changed. Is that what you are saying?

  • 25 Jul 2011 01:19:39

    Not sure if you have seen it but using the latest version of Chrome the border overlap area has the dual transparency issue where two borders overlapping create a doubling of the opacity from 0.3 to 0.6, creating square boxes at each corner of your div darker then the rest of the borders.

    I played around for a while and found an interesting solution/hack, if you add border-radius: ?px; where ? is the same value as the border thickness, in this case 10px, you get rounded transparent borders without the dual transparency boxes from borders that overlay one another.

  • 25 Jul 2011 08:16:05

    Thanks Simon! Yes, have seen the double border overlapping transparency in Chrome. I tried your border-radius method/solution for removing this and it worked great! Thanks again.

  • 19 Feb 2012 23:42:34

    Awesome tutorial on transparent borders.
    I also see that you have some great tutorials on responsive designing.
    Thanks of this tutorial on transparent borders and also for the tut collection on responsive designing.

  • 23 Feb 2012 21:37:30

    Hi, I tried this but am having trouble. It’s making a shade of grey, but isn’t transparent. Can someone help? It’s the border around the excerpt in the slideshow here: http://mark.revcomplay.com/

  • 24 Feb 2012 08:08:17

    @Lydia: You have a background-color: white on the .slide-excerpt class. If you remove this, I think it will make the border transparent.

    .slide-excerpt { background-color: #fff; <— remove this …..
    }

  • 28 Jun 2012 15:45:42

    Thank you, works!! ;-)

Comments are OFF for this post.

© 2024 Clive Walker