I want to create soft edges around paragraphs. More specifically, I want to have a background image behind text. But ..., if I directly write text on top of the background image, text doesn't really stand out. So, I want to make the main color of the background the background color of paragraphs. However, ... if I do something like ... p { background-color: #090B0E; ... } This creates square edges. I don't want this. I want to create nice smooth edges in some way. Doesn't matter if it's CSS, JavaScript / DHTML, use of other images or any combination of these three. How can I create soft edges?
Naturally, if you make the paragraph a different color than the background, you'll have square corners. The easiest way to fix this is to make one background image that spans the entire width of the paragraph, then: p {background:color url(topcorners.png) no-repeat;} this way there will be smooth corners at the top of the paragraph, if you're using a different color that stands out from the main bg. I was a little confused by your question, but I think I got it right!
q1. Let's say that I create an image that has a smooth round top left corner and a smooth round top right. If I use this as each paragraph's background, it has this nice smooth top left corner and the top right corner. Is that right ...? q2. Now, what do I do about the bottom left corner and the bottom right corner? They're still edgy, aren't they?
Same thing just upside down. Try expanding the text size on the home page of my website design site - www.imgwebdesign.co.uk - you'll see that the boxes expand rather then the text breaking out of them. The nav tabs also expand using a technique called the 'sliding door' technique.