How do I make a border semi-transparent in CSS?

Hello Coders! :grin:
How do I make a border semi-transparent in CSS? I need to do this is both content-box and border-box. How do I do this?
Thank you in advance for your help!

Happy Coding!
~ @shanecode9 :computer: :grin:

@shanecode9 {
border: value1 value2 transparent;//border values
}
or/
{
border: value1 value2 rgba(value1, value2, value3, value4);//border values
}
try also : {
border: 20px double transparent;
}

2 Likes

Simplest way I have seen to add a transparent border, is to first set the borders color with an rgbq color. Which is the same as rgb but with an added number between 0 and 1 that sets the opacity:

rgba(255, 0, 0, .5)

In the even the element with the border has a background that is producing unwanted effects, such as blue background meshing with a red border to produce a solid purple color, that is no longer transparent, you can add the background-clip property with padding-box so that the background is limited to within the padding area.

1 Like

Thanks!

1 Like

I used the code you shared, but why can’t I see the pink through the border?

image


@text9756287145 @8-bit-gaming

What color is your border and how transparent is it?
The closer the 4th argument for the rgba() is to zero the more you can see through it.

Could you post your code?

Sure!

.blue {
       border: 5px solid rgba(0, 0, 0, 0.5);
       height: 300px;
       width: 400px;
       padding: 20px;
       box-sizing: content-box;
       background-color: blue;
    }

Your problem here is not with the border. Your border is indeed transparent, which you can tell by the fact that it is a dark blue when without transparency it would be black.

What your running into is that the background of .blue is blue and not transparent. So though the border is transparent it can only see through to the background of its container. You can fix this using the property I mentioned above:

background-clip: padding-box;

This limits the background of an element to be inside of its border, and it will no longer interfere with a transparent border.

A couple more arguments for background-clip are:

  • border-box : The default value, making the background cover the entire element, and extend to the outside edge of the border

  • content-box : Limits the background to the content area of the element, ignoring padding and border.

2 Likes

This post was flagged by the community and is temporarily hidden.

I did try, and the solution actually answered my question. I just want to extend off of it now.

1 Like

:+1: good for you. that’s the way. :clap:

2 Likes

Thanks! This really helped!

1 Like

I have another box that’s a border-box, and I did the same background-clip, so how come I don’t see the green through the border since it’s a border box?

Could you post your code again?

Here’s my other box’s code:

.green {
       border: 5px solid rgba(0, 0, 0, 0.5);
       background-clip: padding-box;
       height: 300px;
       width: 400px;
       padding: 20px;
       box-sizing: border-box;
       background-color: forestgreen;
    }

Are you wanting to see through to the bodies background or the background of .green?

If you want to see the bodies background this code seems to be working perfectly. If you are wanting to see the color of .green background than you need to take away the background-clip property. If you are trying to see through to bother the bodies background and .green background than you need to make the background of .green transparent.

Since the border is supposed to be on the inside of the green box, shouldn’t I be able to see the green through the border?

Not since you have the background-clip.
This property is designed so the green background will not extend under the border, that way the borders transparency will see threw to its parent elements.
If you take away the background-clip than the green background will be seen through the transparent border, but since the background is not transparent you won’t be able to see threw to the parent elements.