This blog is about Graphic Design, Vector Art, and Cartoon Illustration BradHallArt.com


Web design - creating rounded corners in CSS

To create a rounded corner with CSS (Cascading Style Sheets), you have to understand a little bit about how CSS elements are always contained in a box. That box is invisible until you add color to it. So that is where you start. If you haven't added color to the background of a box in CSS, you will need to find out how to do this first.

Once you have your box all colored and set, and have included enough padding to make a nice rectangle, you can round the corners. This is done using the border-radius property. In Dreamweaver, there is a nice little visual that pops up and allows you to select the radius, which corners to do, the whole thing.

You can't get to it using the ordinary interface in Dreamweaver 5.5, but there is a way to get to it. From your CSS styles panel, go to the property for the CSS that you have created for your box and Add Property. Scroll down until you find border-radius. From there, you will get that little pop-up menu that I mentioned before. And if nothing seems to be happening on your page, don't worry. This property only shows in Live View, or you can upload your CSS page to your browser.

As of this writing, this CSS property is not fully supported. But it is a decorative effect, so it's not like your web page will fail if your corners aren't rounded! And, in the time it takes for us to worry about when the support will finally be there, it will be. There are little *hacks* that you can add to the code to try to get it to work in browsers that are stubborn, but I have always tried to steer away from this.

Oh, and by the way - please show some restraint when using rounded corners. Having every box on your page with rounded corners would look pretty goofy. But they make great navigation buttons! You can go see how they work here.