This page has been robot translated, sorry for typos if any. Original content here.

38 articles about creating rounded corners on sites using css

38 articles about creating rounded corners on websites

You often encounter the need to create blocks with round edges. Asked how to solve the task at all, I made a selection of interesting articles and lessons on this topic.

Here is an overview of 38 articles broken down into 4 categories by implementation methods.


Without using empty tags

A simple, semantically correct CSS block with pure code

Creates a block and adds the ability to create a block header. It varies in width and height. Despite the shadow of the example, the implementation of a translucent shadow is not provided.
A simple, semantically correct CSS block with pure code


Round corners in CSS

Very nice appearance, simple implementation, a small amount of HTML elements. By cons, perhaps, you can only include 4 pictures for each of the corners. But alas does not work in IE.
Round corners in CSS


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.
CSS Teaser Block


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. Nice design with the color change function when hovering over the mouse (but this pleasantness does not work in IE).
Links to the latest news


CSS and round corners: Borders with arcs

The undeniable disadvantage 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.
CSS and round corners: Borders with arcs


Top angles from above

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.
Top angles from above


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 there was an opportunity of stretching width.
Create a rounded block or design with CSS and XHTML


Rubber block with easily variable angles and surface

Minuses in this method is also a large number of divs (5) and 4 image files. But there are interesting examples for implementation.
Rubber block with easily variable angles and surface


Rounded Border Angles

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


Round the corners in CSS

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


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.
Creating arbitrary angles and boundaries


Bullet-proof round corners

A very detailed article with a lot of examples. But a fairly complex implementation. In addition, 4 pictures are used.
Bullet-proof round corners


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.
Drawing shadows and frames of design elements


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.
Round corners with fixed width


CSS stretching block with 4 arbitrary angles

Quite a good lesson. The ability to drop shadows. Plus - the ability to create headers.
CSS stretching block with 4 arbitrary angles


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

The article has already been described on Habré. A very simple implementation, but not all the examples given in the article, I'm working in IE. Used 4 files with pictures for implementation. Article in Russian.
Make the rounded corners using the pseudo-elements: before and: after


Creating arbitrary angles and boundaries. Part II

A method is described in which the background is not continuous, but gradient. 4 pictures are used.
Creating arbitrary angles and boundaries. Part II


Round corners in divs

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


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.
Round corners and blocks with a shadow


Interesting layout

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


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.
More round corners with CSS


CSS rubber round corners

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


CSS: Smart Angles

Uses one blank for the top and two for the bottom. Quite a pleasant implementation.
CSS: Smart Angles


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 call a lesson on drawing round edges :)
How to make diverging divisions with round edges


Rounded corners

A great detailed article with a lot of pictures. But on every corner of the marvel, plus a div for the content.
Rounded corners


Rounding corners without using images

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


Using JavaScript

Introducing DomCorners

There are several variations on the number of used images in the article. Minus the use of empty tags.
Introducing DomCorners


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.
Transparent arbitrary angles and boundaries. Version 2


Nifty angles with anti-aliasing

A kind of addition to the script is Nifty Corners. Does not use images. You can change the radius of the rounding both along the X axis and Y.
Nifty angles without smoothing


Round corners

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


http://www.curvycorners.net

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


Nifty Corners Cube

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


RUZEE.Borders - round corners with Javascript

Enough plenty of opportunities. It is also based on Nifty. The ability to create a shadow, but does not work in IE.
RUZEE.Borders - round corners with Javascript


jQuery rounding

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


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.
RoundedCornr


Spiffy Corners

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


Spanky Corners 1.1

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


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.
Spiffy Box