A Guide to Creating Rounded Corners with the Help of CSS

The attainability of rounded corners in website page design has taken on a life of its own on discussion forums, but the advent and development of CSS has enabled the unthinkable to be at your fingertips, albeit with a bit of manipulation of the codes

The problem arises because straight lines are the only possible creation using HTML, so some serious manipulation is needed to create the curved from the straight.

Start with a rectangle

To create a rounded corner image, the trick is to start – naturally – with a standard rectangular box, and place it in position on a page to begin our manipulation – lets call our image ‘xyz.gif’ and assume it is a simple rectangular box.

We can manipulate our square box by using many methods, but none involve truly curved lines.

For instance, a popular method involves surrounding ‘xyz.gif’ with different lengths of lines of different colours, hence creating the desired effect. This is a complex and difficult to grasp concept, but once done can be utilised to great effect.

Look for advice and websites

For those who do not wish to indulge in complex and often time consuming coding, there has been an influx of ‘round corner’ generators’ appear on the web of late.

These are tools that are already coded to create the desired effect, and give you a ready made graphics for your use. These are easier to use and give good results, but bypass the purpose of CSS utilisation somewhat in the process.

You may ask, of course, why do we want rounded corners? The truth is that they look good, and present an impressive impact that is alternative to the standard rectangular box.

The ‘nifty corners’ technique

Reference to any number of sites will give you a good guideline as to how to create these corners, and one particularly helpful is that called ‘nifty corners’.

This involves a tutorial that shows you examples of script used to create a curved corner box from a rectangle, and also utilises its own special built in command that is necessary to shortcut to the finished article.

A look at this site – and others like it – is a good indication as to why embedding our own ‘xyz.gif’ may well be a complex procedure, but with the help of such as ‘nifty corners’ becomes an easy application to use.

Looking to the future

CSS is constantly evolving, and as such is likely to involve its own inbuilt codes for creating rounded corners, but the best way to do so at the moment is clearly to follow the lead of those who have been down the road already.

Search for the subject and you will be given a plethora of options to follow, many of them using different methods to achieve the same aim, and most with script to copy and modify in order to create your own impressive website pages.