The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS the best way of reproduce this box

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #195731
    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.


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


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.