Home > Developer > Web Develop
3.4 CSS3 rounded Border properties
Fillet effects are common on Web pages. Rounded corners Add the beauty of the curve to the page, making the page less blunt, but in order to design the fillet effect.
Syntax and parameters of the 3.4.1 Broder-radius propertyGrammar:
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
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, which will appear mainly in the following situations:
1, border-radius: [ <length>{1,4} ]; //Here only one value, then Top-left, Top-right, Bottom-right, bottom-left four values are equal.
2, border-radius:[ <length>{1,4} ] [ <length>{1,4} ]; //Set two values here, then Top-left equals Bottom-right, and takes the first value; Top-right equals Bottom-left and takes the second value.
3, border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ]; //If there are three values, where the first value is set Top-left, and the second value is top-right and bottom-left and they are equal, the third value is the set bottom-right.
4, border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ]; //If there are four values, where the first value is set Top-left, while the second value is Top-right, the third value bottom-right, and the fourth value is the set Bottom-left.
Border-radius and Border properties, you can also separate the corners separately, so that the derivation of the other four sub-properties, they are the first Y axis in the x-axis, specifically see below:
border-top-left-radius: <length> <length> //左上角border-top-right-radius: <length> <length> //右上角border-bottom-right-radius:<length> <length> //右下角border-bottom-left-radius:<length> <length> //左下角
Each corner splits out the value way: The first value is the fillet horizontal radius, the second value is the vertical radius, if the second value is omitted, then it is equal to the first value, then this angle is a one-fourth fillet, if any one value is 0, then this angle is not a rounded corner.
3.4.2 Border-radius Properties Using Method 1, horizontal and vertical radius1) Border-radius set only one value
<!DOCTYPE html>
2) Border-radius setting of two values
.border-radius{ width: 250px; height: 100px; border: 10px solid orange; border-radius: 10px 30px;}
3) Border-radius setting of three values
.border-radius{ width: 250px; height: 100px; border: 10px solid orange; border-radius: 10px 50px 30px;}
4) Border-radius setting of four values
.border-radius{ width: 250px; height: 100px; border: 10px solid orange; border-radius: 10px 20px 30px 40px;}
2. Set the horizontal and vertical radius values separately.border-radius{ width: 350px; height: 100px; border: 10px solid orange; border-radius: 60px 40px 30px 20px / 30px 20px 10px 5px;}
3. Special Application1) for Border-radius There is a difference between the inner radius and the outer radius, it is mainly the element border value is large, the effect is very obvious, when we border-radius radius value is less than or equal to the thickness of border, we do not have a rounded edge inside the border effect
.border-radius{ width: 350px; height: 100px; border: 30px solid orange; border-radius: 30px;}
2) If the two adjacent sides of the corner have different widths, the angle will be smoothed over the narrow edges. One of the sides can even be 0. The adjacent corners are turned from large to small.
.border-radius{ width: 350px; height: 100px; border-style: solid; border-color: orange; border-width: 10px 5px 20px 3px; border-radius: 30px;}
.border-radius{ width: 350px; height: 100px; border-style: solid; border-color: orange red green blue; border-width: 35px 35px 60px 30px; border-radius: 80px;}
4, the picture applies the filletimg { border: 5px solid red; border-radius: 10px;}
Ie9-11 are used in IE11 emulation mode to view, non-native
5. Table Application Fillet<!DOCTYPE html>
3.4.3 Browser compatibilityMainstream browsers are supported, ie9+ support.
Advantages of the 3.4.4 Border-radius attributeSlightly
3.4.5 Combat Experience: making special graphics1, round
border-radiusThere are two tips for making rounded corners. -The width and height of the element are the same-the radius value of the fillet is either normal for the element width or width, or the radius value of the fillet is set directly to 50%.
2, semi-circle border-radius production of semi-circular round method is the same, only the width of the element and the direction of the fillet to coincide with the width and height of the ratio, and the direction of the fillet, you can make the upper half of the park, the next semicircle, left semicircle, right semicircular effect.
<! DOCTYPE html>
3. Fan
<! DOCTYPE html>
4. Ellipse
<!DOCTYPE html>
Graphical css3--3rd CSS3 border-4 "
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
