CSS3 (border-radius) Border rounded corners detailed

<span id="Label3"></p><span style="line-height: 28px;">For a <span style="line-height: 28px;">traditional fillet generation scenario, You must use multiple pictures as background patterns. The advent of CSS3, so that we no longer have to waste time to make these pictures, only need to <span style="line-height: 28px;">Border-radius properties, support browser ie 9, Opera 10.5, Safari 5, Chrome 4 and Firefox 4</span> </span></span><strong><strong>first, Border-radius Properties</strong></strong>CSS3 fillet simply set a property: border-radius (meaning "border radius"). If you provide a value for this property, you can set the radius of the four rounded corners at the same time. All valid CSS metrics can be used: em, px, percent, and so On. For example, here is a div box (the width is 200, the background is red, the border is 2px solid #000) and now the fillet radius is set to 50px, namely:<pre><pre><br><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">radius<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">50px<span style="line-height: 28px; color: #666600;">;</span> </span> </span> </span> </span></span></pre></pre>This statement sets both the horizontal radius and the vertical radius of each fillet to 50px.<span style="color: #444444; font-family: ‘Hiragino sans GB W3‘, ‘Hiragino sans GB‘, Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px; line-height: 28px;"><span style="color: #444444; font-family: ‘Hiragino sans GB W3‘, ‘Hiragino sans GB‘, Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px; line-height: 28px;"><span style="color: #444444; font-family: ‘Hiragino sans GB W3‘, ‘Hiragino sans GB‘, Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px; line-height: 28px;">Border-radius can set 1 to 4 values at a Time. (think of our previous margin and Padding) if you set a value of 1, this value is used for 4 rounded corners. If you set a value of two, the Upper-left and Lower-right corners use the first value, the upper-right corner and the lower-left corner use the second Value. If you set a value of three, the Upper-left corner uses the first value, the second value is used in the Upper-right corner and the Lower-left corner, and the third value is used in the Lower-right corner. If you set four values, the Upper-left corner, the Upper-right corner, the Lower-right corner, and the lower-left corner (clockwise Order) are Followed. </span></span></span>Cases:<br style="line-height: 28px;"><pre><pre> <br> <span style="line-height:28px; color: #000000;">border<span style="line-height:28px; color: #666600;"> -<span style="line-height:28px; color: #000000;">radius<span style="line-height:28px; color: #666600;">:< Span style= "line-height:28px; Color: #006666; " >50px<span style="line-height:28px; color: #000000;"> <span style="line-height:28px; color: #006666;">25px< Span style= "line-height:28px; Color: #666600; " >; <span style="line-height:28px; color: #000000;"> <span style="line-height:28px; color: #880000;">//<span style="line-height:28px; Font-family: ' Hiragino sans gb W3 ', ' Hiragino sans GB ', Arial, Helvetica, simsun, song body; white-space:normal; "><span style="line-height:28px; color: #880000;"> means the first value is used in the Upper-left and Lower-right corners, and the second value is used in the Upper-right and Lower-left corner of </span> </span> </span> </span> </span></span></span></span></span></span></pre></pre><pre><pre> <br> <span style="line-height:28px; color: #000000;">border<span style="line-height:28px; color: #666600;"> -<span style="line-height:28px; color: #000000;">radius<span style="line-height:28px; color: #666600;">:< Span style= "line-height:28px; Color: #006666; " >25px<span style="line-height:28px; color: #000000;"> <span style="line-height:28px; color: #006666;">10px< Span style= "line-height:28px; Color: #000000; " > <span style="line-height:28px; color: #006666;">50px<span style="line-height:28px; color: #666600;">;<span style="line-height:28px; Color: #000000; "> <span style="line-height:28px; color: #880000;" the top left corner uses the first value, upper-right and lower-left use second lower-right third value < span> </span> </span> </span></span></span></span></span></span></span></span></pre></pre><pre><pre><br><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">radius<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">25px<span style="line-height: 28px; color: #000000;"><span style="line-height: 28px; color: #006666;">10px<span style="line-height: 28px; color: #000000;"><span style="line-height: 28px; color: #006666;">50px<span style="line-height: 28px; color: #000000;"><span style="line-height: 28px; color: #006666;">0<span style="line-height: 28px; color: #666600;">; <span style="line-height: 28px; color: #880000;"> Upper left corner, upper right corner, lower right corner, lower left corner (clockwise order)</span> </span> </span></span> </span></span> </span></span> </span> </span> </span> </span></span></pre></pre>Border-radius can also set a second set of values with a Slash. At this point, the first set of values represents the horizontal radius, and the second set of values represents the vertical radius. The second set of values can also be set from 1 to 4 values, applying the same rule as the first set of Values.<pre><pre><br><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">radius<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">50px<span style="line-height: 28px; color: #666600;">/<span style="line-height: 28px; color: #006666;">25px<span style="line-height: 28px; color: #666600;">;</span> </span> </span> </span> </span> </span> </span></span></pre></pre> <span style="color: #444444; font-family: ‘Hiragino sans GB W3‘, ‘Hiragino sans GB‘, Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px; line-height: 28px;"><span style="color: #444444; font-family: ‘Hiragino sans GB W3‘, ‘Hiragino sans GB‘, Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px; line-height: 28px;"><span style="color: #444444; font-family: ‘Hiragino sans GB W3‘, ‘Hiragino sans GB‘, Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px; line-height: 28px;"><span style="color: #444444; font-family: ‘Hiragino sans GB W3‘, ‘Hiragino sans GB‘, Arial, Helvetica, simsun, u5b8bu4f53; font-size: 16px; line-height: 28px;"> </span></span></span></span><pre><br><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">Radius<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #000000;"> <span style="line-height: 28px; color: #006666;">100px<span style="line-height: 28px; color: #000000;"><span style="line-height:28px; color: #000000;"> <span style="line-height:28px; color: #006666;">25px<span style="line-height:28px; Color: #000000; "> <span style="line-height:28px; color: #006666;">80px<span style="line-height:28px; color: #000000;"> <span style="line-height:28px; Color: #006666; ">5px<span style="line-height:28px; color: #000000;"> <span style="line-height:28px; color: #666600;">/<span style="line-height:28px; Color: #000000; "> <span style="line-height:28px; color: #006666;">45px<span style="line-height:28px; color: #000000;"> <span style="line-height:28px; Color: #006666; ">25px<span style="line-height:28px; color: #000000;"> <span style="line-height:28px; color: #006666;">30px< Span style= "line-height:28px; Color: #000000; " > <span style="line-height:28px; color: #006666;">15px<span style="line-height:28px; color: #666600;">; </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre><strong><strong>ii. setting of single rounded corners</strong></strong>In addition to setting four fillets at the same time, you can set each corner individually. For four corners, the CSS3 provides four separate properties: * Border-top-left-radius * Border-top-right-radius * Border-bottom-right-radius * border-bottom-l Eft-radius these four properties can be set from 1 to 2 values at the same time. If you set a value of 1, the horizontal radius is equal to the vertical radius. If you set 2 values, The first value represents a horizontal radius, and the second value represents the vertical radius.<pre><pre><br><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">top<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">left<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">radius<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #000000;"><span style="line-height: 28px; color: #006666;">50px<span style="line-height: 28px; color: #666600;">;</span> </span></span> </span> </span> </span> </span> </span> </span> </span></span></pre></pre><pre><br><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;"><span style="line-height:28px; color: #666600;">-<span style="line-height:28px; color: #000000;">top<span style="line-height:28px; Color: #666600; ">-<span style="line-height:28px; color: #000000;">left<span style="line-height:28px; color: #666600;">-<span style="line-height:28px; Color: #000000; ">radius<span style="line-height:28px; color: #666600;">:<span style="line-height:28px; Color: #006666; " span>50px<span style="line-height:28px; color: #000000;"> <span style="line-height:28px; color: #006666;">100px< Span style= "line-height:28px; Color: #666600; " >; <span style="line-height:28px; color: #880000;">//<span style="line-height:28px; font-family: ' Hiragino sans GB W3 ' , ' Hiragino sans GB ', Arial, Helvetica, simsun, song body; white-space:normal; "><span style="line-height:28px; color: #880000;"> The first value represents a horizontal radius, and the second value represents the vertical radius. </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre><strong><strong>third, The effect</strong></strong>Implementation Code:<pre><br><span style="line-height: 28px; color: #000000;">Width<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">0<span style="line-height: 28px; color: #666600;">;<br style="line-height: 28px;"><span style="line-height: 28px; color: #000000;">Height<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">0<span style="line-height: 28px; color: #666600;">;<br><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">100px<span style="line-height: 28px; color: #000000;"><span style="line-height: 28px; color: #000000;">Solid Gray<span style="line-height: 28px; color: #666600;">;<br style="line-height: 28px;"><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">radius<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">100px<span style="line-height: 28px; color: #666600;">;<br style="line-height: 28px;"><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">right<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">color<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #880000;">#fff;</span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>Implementation code<pre><br><span style="line-height: 28px; color: #000000;">Height<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">100px<span style="line-height: 28px; color: #666600;">;<br style="line-height: 28px;"><span style="line-height: 28px; color: #000000;">Width<span style="line-height: 28px; color: #666600;"><span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">200px<span style="line-height: 28px; color: #666600;">;<br style="line-height: 28px;"><span style="line-height: 28px; color: #000000;">Background<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #000000;"> Red<span style="line-height: 28px; color: #666600;">;<br style="line-height: 28px;"><span style="line-height: 28px; color: #000000;">Border<span style="line-height: 28px; color: #666600;">-<span style="line-height: 28px; color: #000000;">radius<span style="line-height: 28px; color: #666600;">:<span style="line-height: 28px; color: #006666;">100px<span style="line-height: 28px; color: #666600;">/<span style="line-height: 28px; color: #006666;">50px<span style="line-height: 28px; color: #666600;">;</span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></pre><p><p>CSS3 (border-radius) Border rounded corners detailed</p></p></span>