How to soften an html border color (not to be so opaque)

Question

I want to put a boder colored onto a textbox, but the color i get is too intense and opaque:

I get this border:

enter image description here

I want something like this:

enter image description here

My simple ccs is:

.highlitedborder
{
   border: 2px solid orange;
}

Thank you.

score 5 · Accepted Answer · answered Nov 19 '12 at 12:25

5

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

The last alpha value (0.5) can be seen as opacity.

By the way, what u see in the image is not border. It is closer to box-shadow (that effect is created by browser in some case)

box-shadow: 0 0 4px orange;

answered Nov 19 '12 at 12:25

5hahiL

Even the best developers have a hard time styling for < IE8. My approach is to just get the functionality up and forget the styling. It's user base is small, and majority is with Chrome, Firefox and IE9. – 5hahiL Nov 19 '12 at 17:17

score 2 · Answer 2 · answered Nov 19 '12 at 12:29

2

This part is not the border. It is the outline. You may change it to change it it like

    .highlitedborder
{
   outline-color: your color...or your style;
}

answered Nov 19 '12 at 12:29

André Lucas

1

Is there cross-browser way to simulate the outline-color? – anmarti Nov 19 '12 at 12:39
4

@senyortoni I searched for it and i got this :http://stackoverflow.com/questions/1537968/how-does-internet-explorer-8-support-the-css-outline-attribute – André Lucas Nov 19 '12 at 13:53

score 0 · Answer 3 · answered Nov 19 '12 at 12:31

0

border: 1px solid #e68200

This can help you

answered Nov 19 '12 at 12:31

Misagh Aghakhani

3 Answers3