Rounded corners on clean CSS without JS without anti-aliasing images

Once such a binge has already started a heated discussion, then I will offer my own method of rounding off the corners, with the characteristics that can be seen in the name of the topic.

I want to note that this is not an improvement of any of the existing methods, but a completely new (at least, I could not find anywhere else - probably I was not looking well;) for the method. In article 38 articles on the creation of rounded corners on the sites, this method was also not mentioned.

So, what we have: pure CSS, without a single image, without JavaScript (although with it, for demonstration, we will also do it), with anti-aliasing (that is, smooth transitions), transparent corners (that is, in the background there can be anything), stretching in height and width and, of course, the cross-browser method.
')

HTML:

 <div class = "box w60">
             <div class = "box-c">
                 <em class = "ctl"> <b> & bull; </ b> </ em>
                 <em class = "ctr"> <b> & bull; </ b> </ em>
             </ div>
            
             <div class = "box-inner">
                 Text
             </ div>
            
             <div class = "box-c">
                 <em class = "cbl"> <b> & bull; </ b> </ em>
                 <em class = "cbr"> <b> & bull; </ b> </ em>
             </ div>
            
         </ div>

Here, the box class is used purely for aesthetic purposes (for example, js clings to it, that is, it means that the block will be with rounded corners), no css properties are hung on it.

CSS:

 div.w60
 {
	 width: 60%;
	 margin: 0 auto;
 }	

	 div.box-c
	 {
		 height: 20px;
		 margin: 0 20px;
		 position: relative;
		 background: # C32300;
	 }
	
		 div.box-c em b 
		 {
		    position: absolute;
		    font: 150px Arial;
		    line-height: 40px;
		    font-weight: normal;
		 }
		
		 .ctl, .cbl, .ctr, .cbr 
		 {
		    z-index: 11;
		    width: 20px;
		    height: 20px;
		    color: # C32300;	 
		    overflow: hidden;
		    position: absolute;  
		    background: transparent;
		   
		 }
		
		 .ctl {top: 0;  left: -20px;}
		 .cbl {bottom: 0;  left: -20px;}
		 .ctr {top: 0;  right: -20px;}
		 .cbr {bottom: 0;  right: -20px;}

		 .ctl b {left: -8px;}
		 .ctr b {left: -25px;}
		 .cbl b {left: -8px;  top: -17px;}
		 .cbr b {left: -25px;  top: -17px;}
		
	 div.box-inner
	 {
		 padding: 0 20px;
		 background: # C32300;
	 }

Example let's

You are welcome:

1. Example No. 1 ( mirror ) - usual html + css, rubber in height-width
2. Example number 2 ( mirror ) - the extra markup is removed in unobtrusive js
3. Example # 3 ( mirror ) - to change the color of the box, you do not need to draw pictures, make sprites, or just choose halftones for smoothing - just change 1 (!) Color
4. Example 4 ( mirror ) - what can be done from this

Where is the catch?

Those who know have probably analyzed the code, and realized that the whole point of using a bull — a regular bulletin, is both round and smooth. Accordingly, in each of the corners we show the necessary part of it, hiding the rest.

pros

• pure CSS
• No pictures
• Without javascript
• Smoothness
• Angle Transparency
• Rubberiness

Minuses

With such advantages, you can score on any cons :)

• a change in the radius of the corners pulls the “tugging” of the bullet radius and its coordinates

Who would like the method, use on health.