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.