The second image shows the bottom of a “semi-transparent” box, which should have the leaf image behind it.
My issues: Forming the border on the box (which has a rounded edge, so the usual { border: ; } doesn’t apply), and placing the leaf image “behind” the box. I have absolutely no idea where to start with either of these problems…
Can you clarify exactly what you need as I’m not quite sure what the problem is?
I can see this image which has a background of a leaf shape and on top of that is a rounded button with the word “more inside it”.
I would just make the rounded button as a single image in the background of an anchor and center the text inside it. The button is big enough not to look too bad if text is resized.
The leaf would simply be a background image on a parent div. The button could then be moved into position with margins as appropriate.
I feel I may be missing something important here or have not addressed the question you were asking
I think I’d need to see the “bigger picture” in both senses of the phrase
I can’t see a round content box so I assume that you didn’t show it in your slice and that the round corners are off screen somewhere in that pic.
What are the dynamics of the round content box. Is its a fixed height and width or is it expanding with content?
It sounds like you basically want a semi-transparent box with round corners that has a white border around all edges. If so then you would need to create it in many pieces and you could probably follow the example here and in place of the images use your own transparent images instead. You cannot create unlimited height and width objects with that approach but it will be fine for most uses unless your content box is going to be massive.
If I’m off target again then I may need to see the whole picture of your design to help.
Sounds a little fiddly either way but not impossible