Home » Affiliate Marketing Lessons » Site Building » Intermediate » How to make a round cornered box
Lesson UPDATED! How to make a round cornered box
Download for PC
(Premium Only - read more)
Download for Mobile
(Premium only - read more)
Download lesson notes
(Premium only - read more)
So you want some nice friendly round corners on your website's boxes, do you? Round cornered boxes are hugely popular amongst web designers. They're also surprisingly tricky little fellows to create. In this lesson I'm going to show you a good method for creating nice flexible round-cornered boxes that won't bloat your page with excessive amounts of code.
For this lesson I'm going to assume that you know how to write a bit of HTML and how to add CSS to your page. If you're wanting to do this in Dreamweaver or another web authoring software, it will be faster if you switch into “code” view to do this.
Before you start you're also going to need four small images for your corners. I've created mine in Photoshop by creating a rounded rectangle (that looks roughly like I want my final round-cornered box to look like) and then cropping it so that I've got one corner.
I save that corner as “topleft.gif”.
I can then rotate it 90 degrees and save it as “topright.gif”, and keep doing this...
Log in to view the full lesson (or join free!)
Not a member yet? Joining Affilorama is free, and gives you access to our videos, tools, interviews and forum.
Become a member now »
