InterServer Web Hosting and VPS

How to Create Boxes with Rounded Corners

How to Create Boxes with Rounded Corners

Boxes with rounded corners are a staple of Web 2.0 design.

While rectangular shapes are better used on professional

websites, rounded boxes are more suited for websites that

aim to look playful, modern and experimental.

The boxes can be used in the design in a number of ways.

These include the header and the content. What’s great with

them is that they can divide the page into several parts

without actually using borders.

Here are some ways by which you can use rounded corners on

your website design:

1. Use images

- this is probably the easiest way of adding rounded boxes

on your web page. All you have to do is create a rounded

box using your favorite graphics editor, save it and use it

as a background image for the portion of the page of your


However, the images you use can add kilobytes to your page

which spells slower load times for users and higher

bandwidth usage on your part which is especially important

if you are paying hosting fees for your site.

2. Use CSS

- Cascading Style Sheets is another way of creating rounded

boxes for your website. The great thing about this is that

since you’re only using a style sheet to create these

boxes, it eats up less bandwidth and the page loads faster.

This however, requires a reasonable amount of skill on

creating style sheets. There are a good number of websites

that deal with this which should be enough to help

beginners out.