Element Opacity But Not Border

Element opacity but not border

Use rgba syntax both for color and background and not use opacity for whole element

demo dabblet

input {
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    background: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .8);
}

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.

Element (background-image) opacity, but no border opacity

You're just in the same situation as CSS: set background image with opacity? - you want to have a transparent background, but non-transparent content (to whom the border counts).

So as in CSS3 there is nothing such a background-image-opacity, you can only build a transparent image or position two elements over each other, the lower containing the image (as suggested by the answers there).

But in your case it would be enough to shade the image. This could for example been done by using transparent image from the beginning, but change the underlaying background-color. Or you'd use

<div class="button" title="Zoom!"><img src="icon.gif" alt="glasses" /></div>

with

div.button.disabled img { opacity: .5; }

which makes more sense semantically, too. You should get away from those inline styles.

(updated fiddle)

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);
}

How can I make a transparent div that has a non-transparent border?

Add another div that contains the current div. Remove the border property and the width and height properties on the #box and add it the other containing div. Make sure the containing div has a class instead of an id. An example:

.entirebox {  width: 600px;  height: 200px;  border-radius: 15px;  border: 5px solid black;}
#box {  background-color: white;  opacity: 0.4;}

<div class="entirebox">  <div id="box">    <p>The stuff that you originally had here</p>  </div></div>

image background opacity with no affecting borders

You should put the image in a div container with the size you want. Add the border and border-radius to the div, add opacity to the img element.

IMAGE CREDIT: https://www.pexels.com/@belle-co-99483

.img-container {
  width: 200px;
  height: 150px;
  border: 2px solid red;
  border-radius: 10%;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  opacity: .7;
}

.selected {
    //background-color: red;
}
img {
}

<div class="selected">
<div class="img-container">
   <img
   src="https://images.pexels.com/photos/1000445/pexels-photo-1000445.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
   alt="product-1-thumbnail"
   />
 </div>
</div>

Make a div transparent but keep the borders visible

A working example would be nice.

You cannot seperate the opacity into different parts. But if your element doesn't have a background, it will be transparent, except for the borders.

---

Related Topics