38 articles on creating rounded corners on sites using css
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.
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.
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.
The implementation of both one- and two-picture method is provided. Small amount of HTML elements. Very handy for creating teasers.
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).
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.
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.
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.
The downside to this method is also the large number of divs (5) and 4 image files. But there are interesting examples for implementation.
Not a complete lesson, but shows the principle of using a single border and pictures.
Enough pleasant lesson. Its disadvantage, perhaps, is a relatively large number of HTML elements and the presence of 4 images for each of the corners.
4 files with pictures are used (the maximum block width depends on the width of the picture). But a very detailed lesson.
Very detailed article with lots of examples. But quite a complicated implementation. In addition, 4 pictures are used.
Article by Vladimir Tokmakov. A very complicated implementation, but the pros, of course, is the possibility of creating translucent shadows. Article in Russian.
An interesting example of use. But a minus in the fixed width of this method. Plus is a very simple implementation.
It is a good lesson. Ability to cast shadows. Plus - the ability to create headers.
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.
A method is described in which the background is not solid, but gradient. 4 pictures are used.
Described 3 ways to implement. Tables, divas and divas without pictures. The last option is not very good, since a lot of empty tags are used.
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.
An article on Habré in which habrazhiteli try to offer their solutions. Article in Russian.
Pleasant on the appearance of the technique, but it is a pity that there is no implementation of PNG under IE.
Uses two empty tags at the top and bottom of the block. By cons refers to 6 pictures for implementation.
Uses one empty for the top and two for the bottom. It is a nice implementation.
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.
Large detailed article with lots of pictures. But at every corner on diva, plus div for content.
The way to create a non-cartographic rounded corners. But a lot of empty
<B>elements (a method similar to GMail blocks).
The article has several variations on the theme of the number of images used. Negative use of empty tags.
A nice example of use. Beautiful design. Drop semi-transparent shadows, but shadows do not work in IE.
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 Y.
Very simple implementation, just one div. Also in the comments a lot of add-ons.
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.
Quite a lot of opportunities. Also based on Nifty. The ability to create a shadow, but does not work in IE.
Perhaps the largest selection of various angles. A small number of HTML elements to implement.
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.
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-imagewith the specified parameters. The advantages include simple HTML code. Also in the article there is a link to the lesson, which generated the generated code.