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

  • Subscribe to RSS Feed
  • Submit post to StumbleUpon
  • Submit post to Twitter
  • Submit post to Delicious
  • Submit post to Digg
  • Submit post to Reddit
  • Submit post to Technorati
  • Submit post to Facebook
  • Submit post to GoogleBuzz
  • Submit post to LinkedIn
  • Submit post to FriendFeed
  • Published Date: 2 July 2008
  • Post Time Span: 792 days ago
  • Word Count: 215
  • Author Post Count: 756
  • Categories: Web Tools
  • Comments: 0
  • Trackbacks: 0
  • Pingbacks: 0

This blog is using the Thesis theme & WordPress blogging platform. Customizations on this blog have been done by myself.

I currently freelance as a part-time web designer whereby I offer a variety of web related services. You could alternatively browse through my portfolio for examples of work completed.

Previous post:

Next post: