Rounded corners in 3 div

There are many ways to do rounded corners in the layout. And until all browsers polls start supporting the border-radius property, it will be necessary every time to think about which method to use in this or that project.

There are a variety of different methods - from using substrates of blocks of fixed sizes to creating corners using vml or svg. In this topic, I will not consider the well-known methods, as there is plenty of information on this subject. I tried to create yet another method.

Immediately make a reservation - my method is not a panacea, and it has several drawbacks that I will describe in more detail.

I will try to be brief.
')

Theory

Suppose 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 it), we will need 3 divas and 1 image, in which our corners will be.

For example, 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 width of the image equal to 16 pixels - in the usual case equal to 1em.
This value needs to be remembered - since this will be the width of one “quantum”, and all other dimensions will be multiples of it or reduced by a factor of 0.5 times, 0.25, 0.125 ...

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

 background: url (corners.png) repeat;

then in the end we get the result:



The next step is to add the container inside this one. I show, so far, schematically:



As we can see, the width of this container is 100% of the parent - horizontally and 100% -1% - vertically - to properly cover 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% + 1quant from the parent and the width is 100% −1quant
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.

     <div class = "panel">
         <div class = "h">
             <div class = "v"> Hello world, i'm a beautifull man that likes likes and plums </ div>
         </ div>
     </ div>	

Css file is also not very complicated. One has only to consider that css in this case is for the dynamic height of the content (a multiple of the quantum), although it can 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 that everything is simple and there is no need for additional explanations.

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 a floating width.
• So far, the option of using the border property has not been worked out.
• Need image
• Sometimes you can get lost in the internal and external indents, which does not simplify the layout
• The method is not a panacea, but only food for the mind and will be compiled for each case separately.

pros

• 3 div-a
• Css minimum
• No javascript

It may seem that the minuses are more than pluses, but you decide. When using grid designs, this method (in my opinion) fits perfectly.

UPD: Here you can see the demo