CSS3 how to make rounded corners

To give you a talk about CSS3 words and grammatical structure and CSS3 fillet case, the need for friends can be in-depth study, CSS3 to make rounded corners is not difficult, the difficulty is out of the idea extrapolate.

1, Fillet Word: Border-radius

2. Grammatical Structure div{border-radius:5px}

Set Div Object box Four Corners 5 pixel fillet effect

div{border-radius:5px 0;}

Set the upper-left corner of the Div object box and the lower-right corner of the 5px fillet, and the other two corners are 0 rounded corners

div{border-radius:5px 5px 0 0;}

Set the upper-left corner of the Div object box and the upper-right corner of the 5px fillet, and the other two corners are 0 rounded corners

3. Description:

border-radius:3px 4px 5px 6px

Represents the upper-left corner of the set object 3px fillet, upper right corner 4px rounded corner, lower right corner 5px rounded corner, lower left corner 6px rounded corner.

4. CSS Fillet attribute analysis diagram

Set rounded corners for two div boxes, and a picture to set fillet practice CSS3 rounded corners.

1. Case HTML code

<! DOCTYPE html> 
2, Case CSS code:

. box {border-radius:5px 5px 0 0;border:1px solid #000; width:300px; height:80px; margin:0 auto}. Box2 img{border-radius:5p X}. box3{border-radius:5px 0;  Background: #999; width:300px; height:80px; margin:0 Auto}
3. Fillet Case Effect

CSS3 Fillet effect

DIV+CSS3 layout Border-radius corresponding fillet effect

4. Case description

1), the first box box to observe the fillet effect, set the border style, and set the fillet style border-radius:5px 5px 0 0; Set the upper-left corner and the upper-right corner rounded corners.

2), the second BOX3 box set the background color, set the fillet style border-radius:5px 0, set the upper-left corner and the lower-right corner rounded corners



3), the third pair of BOX2 box picture img Set the fillet style border-radius:5px, set Four corners are rounded corners.

CSS3 to make rounded corners of the tutorial so much, the need for friends can be saved, but also please continue to follow the site's other updates.