Rounded Corner Boxes With Expandable Heights Using CSS and Images

Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill A lot of people shy away from it because it SEEMS a lot more difficult than it really is.

I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect – but I’m willing to sacrifice that.

Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. So let’s start easy!

(more…)

Link to the original site    Link to feed

• ScriptsDesk – Scripts Directory – Collections of Programming Scripts & Programming Resources
• Simplified Post Interlinking using Insights WordPress Plugin
• Report User Searches on your site using the Search Meter WordPress Plugin
• Firefox Plugins to Increase Blogging Productivity (Series 2) – SEO
• Save the Environment with Online Leaf WordPress Plugin

WordPress & Thesis Customizations

This webiste is using Thesis theme & WordPress. I can create you a similar website or update yours.

View my services or portfolio for more details.

Author Information

Article by George Serradinho

I am the proud owner of Serradinho and have made this my second home. I'm into blogging, downloads, WordPress and the internet in general. I also love meeting and helping others and learning new techniques.