Video Tutorial: Rounded Corners with CSS
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
This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.
This article is filed under Training & Education and has the following keyword tags: video, tutorial, css.
16 Comments
Legacy User says:
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
Legacy User says:
Great Tutorial! You have done a great job a showing this technique. Thank you taken the time to post it.
-- Smartdog
Legacy User says:
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
Legacy User says:
Love it... such beauty in simplicity... magnificent tutorial that's easy to follow. It's like watching magic unfold in CSS.
-- Gabriel
Legacy User says:
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
Legacy User says:
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
Legacy User says:
An extremely helpful tool .... very much truly stated by Wolf .... a wonder-weapon for webpage development!!
-- Samit
Legacy User says:
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
Legacy User says:
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
Legacy User says:
css background examples , Properties , Attribute - - http://css-lessons.ucoz.com/background-css-examples.htm
-- sezer
Legacy User says:
Thanks! I started messing with CSS yesterday, but I'm already finding this very useful to my learning.
-- Drew
