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.

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.