If you could share your CSS code with me, I can help you achieve the effect you desire.
To create the desired box, start by setting the height of a div element and applying the border and border-radius properties as needed - typically a 2px border with a radius between 10-15 pixels should work well.
Next, take the header image and crop it down to just 1 pixel wide for efficiency. Use this 1-pixel wide image as the background for another div element, repeating it horizontally but not vertically. Adjust the height of the header to match the gradient image's height.
Inside the container div, add another div element. Resize your second gradient image to 1 pixel width and set it as the background for this new div, utilizing repeat-x. Adjust the height of the header div to account for the difference between its height and that of the container.
Your button can be inserted as a link, possibly housed in yet another div element.
The code for achieving this effect may look something like this:
CSS:
div.container
{
height: 400px;
width: 300px;
border: 2px solid #000;
border-radius: 12px;
}
div.header
{
background-image: url("header-grad.ext");
background-repeat: repeat-x;
height: 40px;
width: 100%;
}
div.content
{
background-image: url("content-grad.ext");
background-repeat: repeat-x;
height: 360px;
width: 100%;
}
And for the HTML markup:
<div class="container">
<div class="header">text here</div>
<div class="content"><\div>
<div class="button></div>
</div>
By following these steps, you should achieve the desired visual result. Additionally, remember to specify the button's CSS separately, which I haven't done due to being on mobile at the moment.
I hope this guidance assists you with your project!