Trying to set opacity for 1px line

Question

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 #name{} as well.

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

Answer 1

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.

Answer 2

Use rgba(255,0,0,0.8) when color your border

div {
  border-bottom: 1px solid rgba(255,0,0,0.8);
  background-clip: padding-box;               /* add if the element have a background */
}