the best way of reproduce this box

[Edu Ruiz]

hey guys,

I have a psd with this layout and I was wondering what is the best way of achieve the green border with a space effect.
have in mind that the background is a gradient, so just putting a red border don’t work.
so, how do you guys think is the best way to do that stuff?

here is a pen with what I have till now.

thanks!

ps. sorry for my bad english, I’m not a native speaker. :(

[Paulie_D]

Sometimes the best way is with a background image…you could try border-image of course.

[Edu Ruiz]

that’s what I’m trying but I stuck in the distance between the white border and the green pattern, can you please post a example of how you think I should do this?

[Edu Ruiz]

thanks for the reply, but in your pen I saw that the box-shadow is a solid color #F11D49 and the background of my site is a linear gradient as you can see in the pen I linked, the site is responsive so the gradient keeps in the middle of the page and if I have a solid border color in the white box it will not fit with the gradient on the site body.

[Author]

Posts