Layout of rounded borders and sharp corners

The complexity of the interface elements increases with each new layout, which causes a lot of trouble for layout designers. Developing technologies allow you to create complex applications in the WEB (Google will not let me lie), so the designers do not restrain themselves and draw more and more sophisticated things. As a rule, this leads to a lot of graphics on the pages.

This article provides a couple of recipes that are useful to the author. Perhaps you are already familiar with them, and perhaps you can bring out something new for yourself, you decide.


1. Rounded borders


I
’ll immediately explain what it is about:
It is necessary to lay out this block so that it stretches in width and height. As a rule, the first thing that comes to mind is to make up a 3x3 table. Put 4 different images with corners in the corner cells, put the content in the center, and hang the corresponding borders for the rest of the cells. The method is cross-browser and quite simple. But firstly, it’s not possible to make up such blocks with tables, and secondly, four small images can be abandoned.

So, we will collect four corners in one image. In my example, I got the following result (32x26 px):
Now we just have to position this image in the background in four different ways in
16x13px blocks
in the corners of the block. As a result, the author it turned out like this :
CSS:
HTML:









Initially, the corners were laid out through 4 DIVA scattered in the corners, and everything would be fine if it were not for one BUT - IE6. In it, this number did not creep in, I had to rearrange everything in this way. So, the problem is solved: we got rid of the tables and reduced the number of HTTP connections by three, by collecting the corners in one oval.

2. Angles less than 90 °


You see a layout with such a block:
The first thing that comes to mind: "Chooort, you have to cut this triangle and somehow attach it to the block." It turns out not necessary. The reception was spied on in the hh.ru layout , for which the headhunter layout designer has a huge respect!

It turns out that the boundaries of the block are divided by joint angles in equal shares, which will create any sharp corners. Illustration:
This is just one line of HTML / CSS:
You will find a more bizarre application of this technique. Screenshot for those who are too lazy to look into the demo:
There is no need to go far for an example of use. Everyone knows the Yandex muzzle:
Instead of the png-shk which they use to create the corner, you can create such an angle from a single border:


Conclusion


If someone wants to share their ways of solving similar problems - please comment. Good luck in the fight against designer arbitrariness!

CrossPost Rounded borders and sharp corners since 2007.fastcoder.ru .

Additions


1) Comrade maxshopen correctly noticed that the border is also transparent, which allows us to typeset without looking at the background of the page. AND dmitrybaranovskiy added that the problem of using a transparent border in IE6 is solved by the Chroma IE filter.
2) Comrades vasilioruzanni and dmitrybaranovskiy suggest that the idea with sharp corners is not new and is found here:
www.uselesspickles.com/triangles/demo.html
tantek.com/CSS/Examples/polygons.html