38 articles about creating rounded corners on sites using css
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.
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.
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.
There is an implementation of both one-and two-picture method. A small number of HTML elements. Very convenient for creating teasers.
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).
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.
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.
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.
Minuses in this method is also a large number of divs (5) and 4 image files. But there are interesting examples for implementation.
It is not a complete lesson, but it shows the principle of using a single boarder and picture.
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.
Use 4 files with pictures (the maximum width of the block depends on the width of the picture). But a very detailed lesson.
A very detailed article with a lot of examples. But a fairly complex implementation. In addition, 4 pictures are used.
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.
An interesting example of use. But the minus in the fixed width of this method. Plus - a very simple implementation.
Quite a good lesson. The ability to drop shadows. Plus - the ability to create headers.
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.
A method is described in which the background is not continuous, but gradient. 4 pictures are used.
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.
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.
An article on Habré, in which the abusers try to offer their solutions. Article in Russian.
Pleasant on the appearance of the technique, but it's a pity that there is no implementation of PNG under IE.
Uses two empty tags on the top and bottom of the block. There are 6 pictures for implementation.
Uses one blank for the top and two for the bottom. Quite a pleasant implementation.
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
A great detailed article with a lot of pictures. But on every corner of the marvel, plus a div for the content.
The method of non-cardinal creation of rounded corners. But there are a lot of empty
<B>elements (a way similar to GMail blocks).
There are several variations on the number of used images in the article. Minus the use of empty tags.
A pleasant example of use. Beautiful decoration. Dropping semi-transparent shadows, but the shadows do not work in IE.
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.
Very simple implementation, just one div element. Also in the comments a lot of additions.
A separate site dedicated to round corners. Beautiful examples of use. Very simple implementation and many customization options.
A very popular script that allows you to create round corners without images. A lot of options for implementation.
Enough plenty of opportunities. It is also based on Nifty. The ability to create a shadow, but does not work in IE.
Perhaps the biggest choice of all sorts of angles. A small number of HTML elements to implement.
A lot of opportunities. Generates 4 types of blocks, including buttons. The only downside is the presence of empty tags in the generated code.
Very simple generator. But it generates a very large number of
A simple generator with good
HTML-codes, plus generates a separate css-filefor IE.
png-picturewith 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.