Home > Developer > Web Develop
CSS3 Round corner Border-radius is also more commonly used, with rounded corners, can be a lot less pictures:)
Grammar:
Border-radius:none | <length>{1,4} [/<length>{1,4}]?
Description: Length cannot be a negative value. Border-radius is an abbreviated method. If the value before and after "/" is present, then the value in front of "/" is set to its horizontal radius, and the "/" after face value sets its vertical radius. If there is no "/", the horizontal and vertical radii are equal. In addition, the four values are set according to the order of Top-left, Top-right, Bottom-right, Bottom-left.
A simple example:
<!DOCTYPE HTML><HTML><Head><style>#radius{text-align:Center;Border:2px solid #a1a1a1;padding:10px 40px;background:#dddddd;width:350px;Height:200px;Border-radius:25px;-moz-border-radius:25px; }</style></Head><Body><DivID= "radius">Border-radius</Div></Body></HTML>
Figure:
When you set two values, the values of the diagonal are the same, Top-left and Bottom-right take the first value, and the other two corners take a different value.
<!DOCTYPE HTML><HTML><Head><style>#radius{text-align:Center;Border:2px solid #a1a1a1;padding:10px 40px;background:#dddddd;width:350px;Height:200px;Border-radius:25px 50px;-moz-border-radius:25px 50px; }</style></Head><Body><DivID= "radius">Border-radius</Div></Body></HTML>
Effect:
You can also set the horizontal and vertical radii for each corner separately:
border-radius:15px 30px/20px 10px;
Equivalent to:
border-top-left-radius:15px 20px;border-bottom-right-radius:15px 20px;border-top-right-radius:30px 10px; border-bottom-left-radius:30px 10px;
Effect:
In addition, when the fillet radius is less than or equal to the border thickness, the inner fillet will be square, which is also well understood, for example:
border:20px solid #a1a1a1; border-radius:20px;
Effect:
When the fillet radius is greater than the border thickness, the inside of the bounding rectangle also renders a fillet effect:
border:10px solid #a1a1a1; border-radius:20px;
Effect:
You can draw a circle with rounded corners:
<!DOCTYPE HTML><HTML><Head><style>#radius{text-align:Center;margin:50px Auto;width:0;Height:0;Border:100px Solid #a1a1a1;Border-radius:100px;}</style></Head><Body><DivID= "radius"></Div></Body></HTML>
Effect:
Remember that CSS3 Doraemon? is drawn with a lot of rounded corners.
The rounded corners of the CSS3
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
