Rounded corners in 3 div-a

There are many ways to make rounded corners in layout. And until all browsers polls start supporting the border-radius property , each time they will have to think about which method to use in a particular project.

There are a wide variety of methods - from using fixed-size block substrates to creating corners using vml or svg. In this topic, I will not consider well-known methods, since there is plenty of information on this subject. I tried creating yet another method.

I’ll make a reservation right away — my method is not a panacea, and it has several drawbacks, which I will describe in more detail.

I will try to be brief.

Theory

Let's say we need to create a block with rounded corners.
In my opinion (I say “mine”, since I have not yet met this method - if-what-correct) we will need 3 divas and 1 image on the method, on which our corners will be.

For example, let's draw a simple picture:


and call it corners.png

On it we have 4 corners, stuck in 1 sprite.
In this case, I took the picture width equal to 16 pixels - in the usual case equal to 1em.
This value must be remembered - since it will be the width of one "quantum", and all other sizes will be multiples of it or reduced by a couple of times - 0.5, 0.25, 0.125 ...

Now imagine that we have a block of a fixed size - for example, 20em to 3em .
If we put him a style

background: url (corners.png) repeat;

then in the end we get the following result:



The next step is to add a container inside this one. I show, for now, schematically:



As we can see, the width of this container is 100% of the parent — horizontally and 100% −1 quant — vertically — to normally overlap the background of the parent container.

Using the same method, we create another container in what we just created:



As we see the height of such a block is 100% + 1 quantum from the parent and the width is 100% −1 quantum
That's the whole method.

Implementation

The markup itself in this case looks like it was said - no more and no less than 3 divs

Hello world, i'm a beautifull man that likes apples and plums

The css file is also not very complicated. It is worth considering that css in this case is for the dynamic height of the content (the height is a multiple of a quantum), although it can also be done with a fixed height

	.panel {
		position: relative;	
		float: left;	
		width: 19em! important; 
		width: 20em; / * for IA 6 * /
		background: url (corners.png) repeat;
		padding: 0.5em 1em 0.5em 0! important;		
		padding: 0.5em 0; / * for IA 6 * /
	}
	.v {	
		background: # 0f0;
		position: relative;	
		float: left;
		font: 1em / 1em Arial, Helvetica, sans-serif normal;
		margin: -0.5em 0;
		padding: 0.5em 0;
		width: 100%;
	}
	.h {
		background: # 00f;	
		position: relative;
		float: left;
		width: 100%;
		padding: 0 0.5em 0 0.5em;
	}

I think - everything is simple and no additional explanations are needed.

As a result, we see that the excellent browsershots.org service tells us that we have achieved the same result in all browsers, which looks like this:

Minuses

The disadvantages of this method include:

• The method cannot be used with floating width
• The option to use the border property has not yet been worked out.
• Need image
• Sometimes you can get lost in the inner and outer margins, which does not simplify the layout
• The method is not a panacea, but just food for the mind and will be compiled for each case separately

pros

• 3 div-a
• Minimum css
• Without javascript

It may seem that there are more minuses than pluses, but it's up to you. When using grid designs, this method (in my opinion) will do just fine.

UPD: Here you can see the demo