Can You Set a Border Opacity in Css

Can you set a border opacity in CSS?

Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

For extremely old browsers that don't support rgba (IE8 and older), the solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

The first border declaration will be the equivalent color to a 50% opaque red border over a white background (although any graphics under the border will not bleed through).

I've added background-clip: padding-box; to the examples above to ensure the border remains transparent even if a solid background color is applied.

How to change the opacity of the border without changing its color

You can use Sass's rgba() function. It can take a hex colour value and an opacity value, and convert it to RGBA:

$borderColor: #5985dc;

.my-input {
  border: 1px solid $borderColor;
}
.my-input:disabled {
  border-color: rgba($borderColor, 0.5);
}

Border image with opacity

You can use pseudo-element to create border with border-image and then set opacity.

div {  position: relative;  margin: 50px;  font-size: 25px;  padding: 10px 25px;  display: inline-block;}div:after {  content: '';  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  border: 5px solid transparent;  border-image: url('http://www.circlek.org/Libraries/2013_branding_design_elements/graphic_CKI_horizontal_stripesblue_RGB.sflb.ashx') 22 22 repeat;  transform: translate(-5px, -5px);  opacity: 0.4;}

<div>Element</div><div>Element <br> lorem</div>

Is there a way to set border opacity in React?

an alpha value can be added in the end of the theme color in this way:-

borderBottom:`${theme.palette.primary.main+'77'} 1px solid`

value can be provided from 00 to ff

Another way is to use material-ui's colorManipulator utility function from directory

import { fade } from '@material-ui/core/styles/colorManipulator';

and use this as like this:-

borderBottom : `${fade(theme.palette.primary.main, 0.5)} 1px solid`

Fade accepts two values.

/**
 * Set the absolute transparency of a color.
 * Any existing alpha values are overwritten.
 *
 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
 * @param {number} value - value to set the alpha channel to in the range 0 -1
 * @returns {string} A CSS color string. Hex input values are returned as rgb
 */

Here is the working example:- https://codesandbox.io/s/agitated-chaum-924

How to set opacity for the border with CurrentColor?

With CSS variables you need to do something like this:

a {  --color: 0,0,255;    text-decoration: none;  color: rgb(var(--color));  border-bottom: 1px solid rgba(var(--color), 0.2);}

<a href="/">Some link</a>

How to make a transparent border using CSS?

Well if you want fully transparent than you can use

border: 5px solid transparent;

If you mean opaque/transparent, than you can use

border: 5px solid rgba(255, 255, 255, .5);

Here, a means alpha, which you can scale, 0-1.

Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity.

For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hex color to your element.

Demo

Demo 2 (With a background image for nested div)

Demo 3 (With an img tag instead of a background-image)

body {
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);   
}

div.wrap {
    border: 5px solid #fff; /* Fall back, not used in fiddle */
    border: 5px solid rgba(255, 255, 255, .5);
    height: 400px;
    width: 400px;
    margin: 50px;
    border-radius: 50%;
}

div.inner {
    background: #fff; /* Fall back, not used in fiddle */
    background: rgba(255, 255, 255, .5);
    height: 380px;
    width: 380px;
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
                         manually calculated*/
}

Note (For Demo 3): Image will be scaled according to the height and
width provided so make sure it doesn't break the scaling ratio.

non-opacity border for opacity element

There isn't a non-opacity attribute but what you can do is set the background colour of that div with RGBA. This allows you to specify an opacity essentially, but just for the background (so it won't affect the border)

background: rgba(0, 255, 0, 0.4);

This will achieve what you want, a red border with that transparent looking background. Demo HERE. This won't however, make inner content, such as images or text transparent. Though you can set the opacity on those elements freely without worrying about the border of the parent.

You can find a good article that details the difference between opacity and RGBA here and here

It should be noted that, as expected, IE8 and below do not support RGBA, though it can be "hacked" with CSS3 PIE.

Can You Set a Border Opacity in Css