How to use Border-radius in CSS

Today we are going to introduce Border-radius, how to use Border-radius, and the properties of Border-radius. Let's look at a small case.

DIVCSS3 fillet Word: Border-radius

Grammatical structure

P{BORDER-RADIUS:5PX}

Set Div Object box Four Corners 5 pixel fillet effect

p{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

p{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

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.

CSS3 Fillet case

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

Case HTML code

<! DOCTYPE html> 
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}
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.

About Border-radius knowledge so much, interested friends can do their own operation, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

How to use Border-radius in CSS

HTML Editor Converter

How to enter a space character in HTML