Altering the Border Opacity of an HTML Element with the RGBA CSS3 Property

It’s not breaking news that the upcoming CSS3 specification includes a great variety of handy and exciting features that will shed a refreshing light on the way that websites can be developed nowadays. Among the numerous properties bundled with CSS3, however, is one that you may find particularly interesting, because of its easy implementation and flat learning curve.

In this case, of course, I’m talking about the “rgba” property, a powerful version of its old predecessor “opacity” that will permit you to simultaneously assign a specific color and a level of opacity to different sections of an HTML element, including its inner text, background and borders. That sounds pretty good, right?

Of course, if you had the chance to take a peek at the first part of this series, then you already have a clearer idea of how to work with the “rgba” property. In that tutorial I demonstrated how to individually change the opacity of the text and the background of all of the H2 elements included in a sample web page. Creating this kind of visual effect in an (X)HTML document could formerly be achieved only by using JavaScript or transparent PNG graphics, which speaks for itself as to how powerful the property really is.

As I noted just a moment ago, though, the rgba property can also be used for manipulating the opacity of the borders assigned to an HTML element. This process is very similar to handling the transparency of its wrapped text and background. If you’re interested in learning how to accomplish this in a few simple steps, in this second chapter of the series I’m going to demonstrate how to implement this effect on the web page coded in the preceding article.

Now it’s time to explore this interesting capability offered by the “rgba” CSS3 property. Let’s go!