Customer Inquiries

1001 Mark Boulevard St.

New York, NY, US.


Mon - Sat 8.00 - 18.00


Sales department

+01 2345 6789

CSS Rounded Corners With Images

Rounded corners are widely used as a way to isolate certain content on your webpages and, at the same time, get away from the block-ish look of everything having 90 degree right angles. Even though CSS3 has some relief coming for using simpler methods to attain the rounded corners look, it’s not supported in all browsers (especially IE) and it could be years before all the people surfing the web update their software to accommodate it. So, in the interim, we use methods like these.The difference in which of these methods you use depends upon what you want your rounded corner box to do. In most cases it’s going to expand vertically as you add content. Therefore, we’ll assume it’s going to be a fixed width horizontally. But, option #1 could expand both directions while option #2 would not expand horizontally without modifying the images. Option #1 – using corner images This option requires you create the corner images with all four being exactly equal in size and named according to the code sample. And the CSS being: Option #2 – fixed width The other option requires just three images, the top, middle and bottom. This method uses three div’s with the middle one being your content container. Each div has a background which is your top, middle and bottom. The middle div, though, is where your content goes and is expandable vertically depending upon that content. The nice part about this setup is you can style your borders for your box any way you wish and have uneven dimensions on the top or bottom. The center or middle is simply a div with some margins to position your text. And, the CSS for this: Option #2 was used in a recent project for the main content area. This content holder was also the target div for the Ajax display of content from page to page. The div expands vertically without breaking in order to allow as much space as needed for the various pages being summoned into the content area. You can view it at Myers Chiropractic Center



Pin It on Pinterest

Share This