Board Thread:Support Requests - Designing Your Wiki/@comment-27179086-20200518052630/@comment-9605025-20200518062844

The custom border is actually just 4 background images (one per corner) with transparent parts. As for the transparency, I went ahead and did that for you.

Here is a very brief explanation of what is going on if you care to read it. CSS actually deals with opacity which is the antonym of transparency. 100% transparent is 0% opaque and 100% opaque is 0% transparent.

To give a color transparency, you need to specify the transparency. This requires that you specify colors by components rather then by names such as "red" and "orange". Chances are you already do this. The most common form is the hexadecimal representation (ex. "#feac20"). Modern browsers support an extended version of this where there are 8 digits; the last two representing opacity. For example, "#feac2000" is the previous color example but with no opacity (i.e. completely transparent).

Unfortunately, older browsers don't support the 8-digit hexadecimal format. If you want to support older browsers, you will need to use either the "rgba" function or the "hsla" function. I assume you are not specifying colors using HSL so I won't go into that function. The "rgba" function has the same order as the hexadecimal representation. So going with the same color, it would be "rgba(254, 172, 32, 0)". The first 3 components are the direct conversion of the hexadecimal digits; so the range is 0 to 255. The opacity is specified as 0 to 1.

If this didn't make sense to you but you want to try to understand it, then I suggest the following pages for more details.
 * named colors
 * color values

Note that you can give an entire element transparency by using the opacity property. Valid values are 0 to 1.