Home > Developer > Web Develop
Using the CSS3 Border-radius property, you can make a fillet for any element.
Add rounded corners to the background, borders, and pictures, respectively.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>CSS3 Rounded Corners</title> <styletype= "Text/css"> * {margin:0;padding:0; }Div{width:200px;Height:150px;Line-height:150px;text-align:Center;margin:20px Auto; }. Rcorners1{Border-radius:25px;background:#8AC007; }. Rcorners2{Border-radius:25px;Border:2px solid #8Ac007; }. Rcorners3{Border-radius:25px;background:URL (paper.gif) left top repeat; }</style></Head><Body> <Divclass= "Rcorners1">Rounded corners with background</Div> <Divclass= "Rcorners2">Rounded corners with borders</Div> <Divclass= "Rcorners3">Specify rounded corners of the background</Div></Body></HTML>
The effect is as follows:
If you specify only one value in the Border-radius property, 4 rounded corners are generated.
However, if you want to specify one by one on Four corners, you can use the following rules:
We have shown a value above, the following shows the next four values, three values, two values,
Four values:
border-radius:10px 30px 50px 70px;
The effect is as follows:
Three values:
border-radius:10px 40px 10px;
The effect is as follows:
L Two values:
border-radius:10px 80px;
The effect is as follows:
Let's draw a circle, as long as the width is the same height and the size of the four corners is half the width and height is a circle
Width:200px;height:200px;border-radius:50%;background-color: #8AC007;
css3--rounded Corners
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
