English Deutsch Español Italiano Русский Svenska 日本語

CSS3 Rounded Corners

One of the most famous CSS3 properties is border-radius. Web designers will no longer have to resort to complex table structures using custom-made corner graphics in order to produce designs with rounded corners. Use CSS3 border-radius to make your corners rounded!

The following code is generated for the border-radius in CSS3Menu:
border-radius:0 0 9px 9px;
-moz-border-radius:0 0 9px 9px;
-webkit-border-radius:0 0 9px 9px;

Here's a snapshot from Firefox showing the rounded corners effect:


The border-radius is supported by the following browsers: Webkit (from Safari 3+), Opera 10.5, Firefox 3.5.

See also:
CSS3 Rounded Corners, CSS3 Shadow, CSS3 Animation, CSS3 Text Shadow, CSS3 Gradient, CSS3 Transition


CSS3 Rounded Corners Generator

Rectangular shapes are boring. Since the onset of graphical interfaces, computer programmers have been obsessing over producing perfectly rounded corners on screen without applying excessive amount of strain on the computer’s memory. People have not faced that problem for a couple of decades now, with all sorts of software showing off smooth, rounded edges on various objects, but it took several years to roll out the same functionality for Internet browsers.


You would be surprised how much something as simple as rounded corners on buttons can change the Internet users’ perception of a site. The navigation menu is one of the first things people glance at when they visit a website, and that impression both consciously and unconsciously influences their further decisions. Smooth, rounded corners convey friendliness and accessibility, which is very important if you want to keep your new visitors from leaving your site.

A popular way of acquiring rounded corners for buttons and other website elements was by the use of images. It gave web designers full control of how these objects would look on the website and modify their appearance with the highest precision, down to a single pixel. It was also a clumsy way of handling it, used mainly because there was no decent alternative to that approach. There is an alternative now.

CSS3 Menu rounded corners generator allows a wide range of customizable functions apart from its main purpose. For example, it allows the radius of every corner to be set separately from others, resulting in a different radius at each side of the rectangle. Apart from the obvious color and border width settings, it is possible to add additional effects to it like to any other CSS3 object, starting from a simple shadow and ending with animation.

Your website’s navigation menu will benefit greatly from adding rounded corners to its buttons, sub-menus and sections. Unfortunately, trying to find the right settings through CSS code alone, even if you know it well, can be bothersome. You can turn to several online resources, which allow you to preview the rounded corner generator results with different settings, or use advanced software that takes care of every function included in CSS3 and costs a fortune.

However, to build a stable and polished navigation bar that your visitors will enjoy using, it is best to use free software like CSS3 Menu, developed specifically to quickly and efficiently find the most suitable effects for your navigation menu.

The good news is that you will never have to use pictures for this purpose. Instead of clogging up your server with pointless image files that exist only for the reason of resembling shapes to be later occupied by text, you will have direct access to CSS3 Menu rounded corners generator and be able to make necessary adjustments to your buttons at any time you want.

A friendly looking and effective navigation menu, coupled with the simplicity and style of a rounded corner generator will make your website stand out from the crowd, in good way!


Recent Templates