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.