Element opacity but not border

css border opacity
Andrés Orozco picture Andrés Orozco · Nov 26, 2012 · Viewed 13.8k times · Source

Well, I have this question and I see that someone already asked something similar but this I don't understand yet.

What I want to do is to set a opacity of 0.7 to an element but just to the content and not to the border, I want the border to stay full color. Some example code here:

input#element{
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    opacity: 0.8;
}

The result is that my input element has the opacity but even the border, Can someone tell me how to set the opacity just in the content but not the border?

Thank's.

Answer

Vladimir Starkov picture Vladimir Starkov · Nov 26, 2012

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

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More