How to use CSS to make rounded corners

CSS to make rounded corners tutorials with HTML code and all CSS code.

Another way to make rounded corners with CSS is to use no pictures.
HTML code:

<div
			class= "Curvedbox" >
	<span>
		<span
			class= "R1" ></span>
		<span
			class= "R2" ></span>
		<span
			class= "R3" ></span>
		<span
			class= "R4" > </span> 
	</span>
	<div
			class= "Content" >
	Flex is a cross-platform development Framework for creating rich Internet applications (RIAs). Flex enables to create expressive, high-performance applications this run identically on all major browsers and Operat ing systems.
	</div>
	<span>
		<span
			class= "R4" ></span>
		<span
			class= "R3" ></span>
		<span
			class= "R2" ></span>
		<span
			class= "R1" ></span >
	</span>
	</div>

CSS code:

Ody{background-color: #000;}
. curvedbox{width:300px;margin:2510px auto 0;}
. Curvedbox. R1,.curvedbox. R2,.curvedbox r3,.curvedbox. R4{background-color: #fff;d Isplay:block;overflow:hidden; height:1px;font-size:1px;}
. Curvedbox. R2,.curvedbox. R3,.curvedbox. r4{border-width:0 1px;border-left:1px solid #fff; border-right:1px solid #fff;}
. Curvedbox. r1{margin:0 6px;}
. Curvedbox. r2{margin:0 3px;}
. Curvedbox. r3{margin:0 2px;}
. Curvedbox. r4{margin:0 1px;height:2px;}
Curvedbox. Content{background: #fff; border-left:1px solid #fff border-right:1px solid #fff;p adding:0 5px;}

This method is actually not perfect, but it only uses the concept of "infinity". Look at the enlarged picture, you can see the jagged shape very clearly.

Serrate

In fact, the picture amplification enough to multiply the words, you can see the sawtooth, but the magnification is quite large. Cascade the R1 R2 R3 R4, using their margin (left/right) changes and border (left/right) to achieve this approximate effect. Theoretically, if the RN is more than enough, the effect will be infinitely closer to the arc. But then again, add so many tags and css, in the efficiency of the inevitable there will be problems, also say no better than with pictures where to go. So, this is only to provide a thinking, in the end how to use, where, but also to local conditions.

But there is a 1th in fact should pay attention to the Rn{;overflow:hidden; this is to solve IE under the 1 pixel High container method, ie when the container height below certain values (such as 10px), even if the specified
height:1px; The performance will be much higher than the 1px, and Overflow:hidden; is a good way to solve it.