big_smile big_smile - 4 months ago 20
CSS Question

CSS3 Gradients: How to make a 1px wide line

I want to make a CSS3 gradient that consists of a 1px line.

How can I do this?

I have tried the following code, but the gradient that is produced is too thick:

background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 51%);


(see here)

How can I make the line smaller, so its only 1px wide? The percentage values seem to control the positioning of the line, but no matter how much I adjust them, I can't get it to 1px wide!

(Essentially, I am using the line to act as a 'faux columns' background [i.e. to visually separate a left and right column. (Although, to keep the jsFiddle simple, I have removed the columns)] I know there are other ways of doing columns, but this method is the best for my situation)

EDIT: Just to clarify, this is for a slightly odd use case, where the width has to be 100% and no psudeo-elements can be used.

Answer
.style {        
    background-image: -o-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -moz-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -webkit-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 0%, rgb(255,255,255) 50.5%);
    background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
}

You are not dealing with pixels, you are using percentages. So 1% of your width, which must be 200 is 2px. (I think that is why this works, maybe I'm wrong.) You can use percentages decimals, so .5% == 1px.