Practical Ecommerce

Video Tutorial: Rounded Corners with CSS

View Tutorial Rounded corners present a unique challenge to website designers, particularly when using Cascading Style Sheets (CSS) to create layouts that are search engine friendly and scalable. In an attempt to de-mystify some of the techniques used to create visual effects, such as rounded corners, Practical eCommerce’s online director Brian Getting illustrates one method creating layouts with rounded corners.

In a slightly more advanced tutorial, we start by creating the image assets we will need to create rounded corners in Photoshop. By first exploring the limitations of transparent GIF’s, we then take advantage of transparency in the GIF format to achieve our effect. Once our images are created, we move on to tackling the CSS needed to render our effect in a browser.

Once finished, we will have created an HTML page element with rounded corners and a background image, giving us the tools we need to created complex website layouts using CSS.

Please feel free to download and review the additional files provided below.

Software Used: Adobe Photoshop CS2, TextMate

Additional Files: CSS_Rounded_Corners.zip

View Tutorial

This video tutorial requires Flash Player version 8 or above.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Legacy User July 10, 2007 Reply

    Your previous CCS layout tutorial is great and this new one the is the feather on the cap. I hope in future we will be benefited by Mr. Getting and Practical eCommerce.

    — *akram*

  2. Legacy User July 3, 2007 Reply

    Awesome tutorial!! Extemely helpful that you showed the entire process from beginning to end! This is something I've had problems with and your technique seems relatively easy to apply.
    THANK YOU!

    — *Vicki Garrison*

  3. Legacy User July 3, 2007 Reply

    Excellent Tutorial. It will certainly be put to good use.

    — *A Holding*

  4. Legacy User July 3, 2007 Reply

    Great Tutorial! You have done a great job a showing this technique. Thank you taken the time to post it.

    — *Smartdog*

  5. Legacy User July 4, 2007 Reply

    Great tutorial, Brian! I was wondering if you can use a 1px gif for the box background instead of the 500px x 156 "box_bg.gif" ? Anyway, thanks for the tutorial and please, please keep them coming…

    — *Guillermo*

  6. Legacy User July 4, 2007 Reply

    Very COOL!!! Loved it!

    — *Gail*

  7. Legacy User July 4, 2007 Reply

    Love it… such beauty in simplicity… magnificent tutorial that's easy to follow. It's like watching magic unfold in CSS.

    — *Gabriel*

  8. Legacy User July 4, 2007 Reply

    Nice work! Simple and effective.

    — *Jim*

  9. Legacy User July 30, 2007 Reply

    Great tutorial, fast, clear, useable and helpful!

    Thanx

    — *Jeroen*

  10. Legacy User August 23, 2007 Reply

    This was extremely helpful; after spending hours researching CSS only, CSS/Javascript, CSS/images based rounded box corners, your visual representation of what needed to be done in this video confirmed for me which way appears to be the most straightforward and anti-time consuming! I appreciate all your efforts.

    Thank you!!

    — *Wolf*

  11. Legacy User September 28, 2007 Reply

    An extremely helpful tool …. very much truly stated by Wolf …. a wonder-weapon for webpage development!!

    — *Samit*

  12. Legacy User January 29, 2008 Reply

    Thank you so much; you are a really a good man……I salute you!

    — *greg*

  13. Legacy User April 30, 2008 Reply

    Again! Great tutorial! Not to fast paced! Perfect! When are we going to get more of these? I"m curious about CSS classes… ;) What they are, how they work, etc. :D

    — *Jordan P*

  14. Legacy User May 1, 2008 Reply

    Real cool stuff. Simplifying the complex!!I was just wondering what we should do if we need to to have a HORIZONTAL to be expandable

    — *Madhu*

  15. Legacy User June 17, 2008 Reply

    css background examples , Properties , Attribute – – http://css-lessons.ucoz.com/background-css-examples.htm

    — *sezer*

  16. Legacy User June 24, 2008 Reply

    Thanks! I started messing with CSS yesterday, but I'm already finding this very useful to my learning.

    — *Drew*