38 articles about creating rounded corners on sites using css

Without using empty tags

A simple, semantically correct CSS block with clean code

Creates a block and adds the ability to create a block header. It varies in width and height. Despite the shadow on the example, the implementation of a translucent shadow is not provided.

Round corners in CSS

Very nice appearance, simple implementation, a small number of HTML elements. By the minuses, perhaps, can be attributed only the presence of 4 pictures for each of the corners. But alas does not work in IE.

CSS Teaser Block

There is an implementation of both one-and two-picture method. A small number of HTML elements. Very convenient for creating teasers.

Links to the latest news

Very interesting solution based on an unordered list. The plus is a simple implementation and a small number of HTML elements. Pleasant design with a color change function when hovering over the mouse (but this pleasantness does not work in IE).

CSS and round corners: Borders with arcs

The undeniable minus is the presence of 8 divs for implementation. Also in the article there is a description of another method, which uses 2 times less divs, but the block is filled with color.

Top angles from top

Implemented on the basis of definition lists. Enough beautiful design, the ability to create a header. There is no support for changing the width. But there is a convenient ability to quickly change the color of the headers and the block itself.

Create a rounded block or design with CSS and XHTML

As in the previous method, everything is implemented on the basis of a list of definitions. Two methods of implementation are considered in the article. Also appeared the possibility of stretching width.

Rubber block with easily variable angles and surface

Cons in this way is also a large number of divs (5) and 4 image files. But there are interesting examples for implementation.

Rounded Border Angles

It is not a complete lesson, but it shows the principle of using a single boarder and picture.

Round corners in CSS

Quite a pleasant lesson. Its downside, perhaps, is the relatively large number of HTML elements and the presence of 4 pictures for each of the corners.

Creating arbitrary angles and boundaries

Use 4 files with pictures (the maximum width of the block depends on the width of the picture). But a very detailed lesson.

Bullet-proof round corners

A very detailed article with lots of examples. But a fairly complex implementation. In addition, 4 pictures are used.

Drawing Shadows and Frames of Design Elements

Article by Vladimir Tokmakov. A very complex implementation, but of course, the possibility of creating semi-transparent shadows applies to the pluses. Article in Russian.

Round corners with fixed width

An interesting example of use. But the minus in the fixed width of this method. Plus - a very simple implementation.

CSS stretching block with 4 arbitrary angles

Quite a good lesson. The ability to drop shadows. Plus - the ability to create headers.

Make the rounded corners using the pseudo-elements: before and: after

The article has already been described in Habré. Very simple implementation, but not all of the examples given in the article, I'm working in IE. Used 4 files with pictures for implementation. Article in Russian.

Creating arbitrary angles and boundaries. Part II

A method is described in which the background is not continuous, but gradient. 4 pictures are used.

Round corners in divs

Three methods of implementation are described. Tables, divas and divas without pictures. The last option is not very good, since many empty tags are used.

Round corners and blocks with a shadow

Perhaps not a good way, since 5 pictures are used. But it seems to be possible to create a shadow. Plus - use only two HTML elements.

Entertaining layout

An article on Habré, in which the abusers try to offer their solutions. Article in Russian.

Using empty tags

More round corners with CSS

Pleasant on the appearance of the technique, but it's a pity that there is no implementation of PNG under IE.

CSS rubber round corners

Uses two empty tags on the top and bottom of the block. There are 6 pictures for implementation.

CSS: Smart Angles

Uses one blank for the top and two for the bottom. Quite a pleasant implementation.

How to make diverging divisions with round edges

It seems to be and with PNG, but again in IE does not work. As a plus, you can name a lesson in drawing round edges

Rounded corners

A great detailed article with a lot of pictures. But at every corner of the marvel, plus a diva for content.

Rounding corners without using images

The method of the non-cardinal creation of rounded corners. But there are a lot of empty <B> elements (a way similar to GMail blocks).

Using JavaScript

DomCorners view

In the article there are several variations on the number of used images. Minus the use of empty tags.

Transparent arbitrary angles and boundaries. Version 2

A pleasant example of use. Beautiful decoration. Dropping semi-transparent shadows, but the shadows do not work in IE.

Nifty corners with anti-aliasing

In its way, the addition to the script is Nifty Corners. Does not use images. You can change the rounding radius both along the X axis and Y.

Round corners

Very simple implementation, just one div element. Also in the comments a lot of additions.

Http://www.curvycorners.net

A separate site dedicated to round corners. Beautiful examples of use. Very simple implementation and many customization options.

Nifty Corners Cube

A very popular script that allows you to create round corners without images. A lot of options for implementation.

RUZEE.Borders - round corners with Javascript

Enough of a lot of opportunities. It is also based on Nifty. The ability to create a shadow, but does not work in IE.

JQuery rounding

Perhaps the biggest choice of all sorts of angles. A small number of HTML elements to implement.

Generators of round edges

RoundedCornr

A lot of opportunities. Generates 4 types of blocks, including buttons. The only downside is the presence of empty tags in the generated code.

Spiffy Corners

Very simple generator. But it generates a very large number of <B> elements.

Spanky Corners 1.1

A simple generator with good HTML-codes , plus generates a separate css-file for IE.

Spiffy Box

Generates one png-picture with the given parameters. The pluses can be attributed simple HTML code . Also in the article there is a link to the lesson on which the generated code was generated.