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

38 articles on creating rounded corners on sites using css

38 articles on creating rounded corners on sites

Often faced with the need to create blocks with round edges. Asking how to solve the problem at all, I made a selection of interesting articles and lessons on this topic.

Here is a review of 38 articles, divided into 4 categories by methods of implementation.


Without the use of empty tags

Simple, semantically correct CSS block with clean code

Creates a block and adds the ability to create a block header. Stretches in width and height. Despite the shadow of the example, the implementation of a semi-transparent shadow is not provided.
Simple, semantically correct CSS block with clean code


Round corners in CSS

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


CSS teaser block

The implementation of both one- and two-picture method is provided. Small amount of HTML elements. Very handy for creating teasers.
CSS teaser block


Links to the latest news

Very interesting decision based on an unordered list. A plus would be a simple implementation and a small amount of HTML elements. Nice design with the function of changing the color when you hover the mouse (but this pleasure 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 sale. Also in the article there is a description of another method, in which 2 times less divs are used, but the block is filled with color.
CSS and round corners: Borders with arcs


Top corners

Implemented based on definition lists. Pretty beautiful design, the ability to create a title. There is no support for changing the width. But there is a convenient opportunity to quickly change the color of the headers and the block itself.
Top corners


Creating a rounded block or design with CSS and XHTML

As in the previous method, everything is implemented based on the list of definitions. The article describes two ways to implement. Also, there was the possibility of stretching widths.
Creating a rounded block or design with CSS and XHTML


Rubber block with easily adjustable corners and surface

The downside to this method is also the large number of divs (5) and 4 image files. But there are interesting examples for implementation.
Rubber block with easily adjustable corners and surface


Border Rounded Corners

Not a complete lesson, but shows the principle of using a single border and pictures.
Border Rounded Corners


Round corners in CSS

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


Creating arbitrary corners and borders

4 files with pictures are used (the maximum block width depends on the width of the picture). But a very detailed lesson.
Creating arbitrary corners and borders


"Bulletproof" round corners

Very detailed article with lots of examples. But quite a complicated implementation. In addition, 4 pictures are used.
Bulletproof round corners


Drawing Shadows and Borders

Article by Vladimir Tokmakov. A very complicated implementation, but the pros, of course, is the possibility of creating translucent shadows. Article in Russian.
Drawing Shadows and Borders


Round corners with a fixed width

An interesting example of use. But a minus in the fixed width of this method. Plus is a very simple implementation.
Round corners with a fixed width


CSS stretching block with 4 arbitrary angles

It is a good lesson. Ability to cast shadows. Plus - the ability to create headers.
CSS stretching block with 4 arbitrary angles


Make rounded corners with pseudo-elements: before and: after

Article has already been described on Habré. A very simple implementation, but not all of the examples in this article work in IE. Used 4 files with pictures for implementation. Article in Russian.
Make rounded corners with pseudo-elements: before and: after


Create arbitrary corners and borders. Part II

A method is described in which the background is not solid, but gradient. 4 pictures are used.
Create arbitrary corners and borders. Part II


Round Corners in DIVs

Described 3 ways to implement. Tables, divas and divas without pictures. The last option is not very good, as many empty tags are used.
Round Corners in DIVs


Round corners and blocks with shadow

Perhaps not a very good way, because it uses 5 pictures. But the possibility of creating a shadow seems to be provided. Plus - use only two HTML elements.
Round corners and blocks with shadow


Entertaining layout

An article on Habré in which habrazhiteli try to offer their solutions. Article in Russian.
Entertaining layout


Using empty tags

More round corners with CSS

Pleasant on the appearance of the technique, but it is a pity that there is no implementation of PNG under IE.
More round corners with CSS


CSS rubber round corners

Uses two empty tags at the top and bottom of the block. By cons refers to 6 pictures for implementation.
CSS rubber round corners


CSS: Smart Corners

Uses one empty for the top and two for the bottom. It is a nice implementation.
CSS: Smart Corners


How to make stretch-wide divas with round edges

It seems to be with PNG, but again in IE does not work. As a plus, you can call a lesson on drawing round edges :)
How to make stretch-wide divas with round edges


Stretched round corners

Large detailed article with lots of pictures. But at every corner on diva, plus div for content.
Stretched round corners


Rounding corners without using images

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


Using javascript

DomCorners view

The article has several variations on the theme of the number of images used. Negative use of empty tags.
DomCorners view


Transparent arbitrary angles and borders. Version 2

A nice example of use. Beautiful design. Drop semi-transparent shadows, but shadows do not work in IE.
Transparent arbitrary angles and borders. Version 2


Nifty smoothing angles

In its own way is the addition to the script Nifty Corners. Does not use images. You can change the radius of the rounding both on the X axis and on the Y.
Nifty angles without smoothing


Round corners

Very simple implementation, just one div. Also in the comments a lot of add-ons.
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

Quite a lot of opportunities. 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 largest selection of various angles. A small number of HTML elements to implement.
jQuery rounding


Round Edge Generators

RoundedCornr

A large number of opportunities. Generates 4 types of blocks, including buttons. The only negative 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-image with the specified parameters. The advantages include a simple HTML code . Also in the article there is a link to the lesson, which generated the generated code.
Spiffy box