CSS border-bottom dotted RGB color opacity setting

As a quick note, if you ever want to created a dotted border that has some RGB opacity to it, I just used the following CSS code to style some hyperlinks, and I can confirm that it works:

.content a,
.content a:visited,
.content a:hover
{
    color: rgb(0,81,168);
}

.content a:hover
{
    border-bottom: 2px dotted rgba(0,81,168,0.25);
}

Note that the key to this is using the rgba syntax, along with a 0.25 opacity setting in this example. If you try to use rgb rather than rgba, which I did at first, this solution won’t work.

Because I have a white background on the website I used this on, the resulting effect is to make the bottom dotted border a lighter version of the hyperlink color (thanks to the opacity setting).

In summary, if you ever want to create a CSS border with an RGB opacity setting, I hope this is helpful.

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

Add new comment

The content of this field is kept private and will not be shown publicly.

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.