Alex Teesdale Alex Teesdale - 2 months ago 5x
HTML Question

Trying to set opacity for 1px line

I am trying to do the following:

border-bottom: 1px solid #00b4f5;

When I add
opacity: .8;
to the 1px line, it applies it to the entire
as well.

I would only like the 1px line to have the opacity applied.


If you set the opacity it will affect the entire element, whereas using rgba() will apply to the specific property you set it to.

In rgb, #00b4f5 equals to rgb(0, 180, 245), so with opacity: .8 your code will be:

.element {
    border-bottom: 1px solid rgba(0, 180, 245, .8);

Note: Here is a nice website to use to make your hex2rgb conversions in the future.