How to blur border's bottom and top?

Question

like this

in my design both side of div has border like this and content in div can be increased or decreased . and in any condition both side top and bottom should be blur like this.

How to make this possible? using css, image any method...

Answer 1

Here is an example of the CSS3 (Webkit and Moz) gradient codes in effect at the moment. I don't think what you're asking is doable without images. Maybe you could use SVG?

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.17, rgb(10,74,133)),
    color-stop(0.78, rgb(146,189,224))
)
-moz-linear-gradient(
    center bottom,
    rgb(10,74,133) 17%,
    rgb(146,189,224) 78%
)

Answer 2

For Safari/Chrome and Firefox you can use the CSS3 border-image: http://www.css3.info/preview/border-image/

Answer 3

this is your top part of your div with fixed height:

-webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.08, rgb(240,240,240)),
    color-stop(0.96, rgb(130,130,130))
)
-moz-linear-gradient(
    center top,
    rgb(240,240,240) 8%,
    rgb(130,130,130) 96%
)

this is your bottom part with fixed height

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.08, rgb(240,240,240)),
    color-stop(0.96, rgb(130,130,130))
)
-moz-linear-gradient(
    center bottom,
    rgb(240,240,240) 8%,
    rgb(130,130,130) 96%
)

between these two elements is your variable height div. to customize colors and gradients, use one of thousands of tools like http://gradients.glrzad.com/