Home>Article>Web Front-end> What is the css property that sets the corner radius of an element?
The css attribute that sets the rounded corner radius for an element is border-radius. This attribute can set the outer border rounded corners of the element. You only need to add the "border-radius: rounded corner value;" code style to the specified element. That is Can achieve rounded corner effect.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The css property that sets the corner radius of an element is border-radius.
The border-radius property can set the outer border of an element to be rounded; using the CSS3 border-radius property, you can make "rounded corners" for any element.
Syntax:
border-radius: 1-4 length|% / 1-4 length|%;
Note: The order of the four values for each radius is: upper left, upper right, lower right, lower left. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.
| Value | Description |
|---|---|
| length | Definition Bend The shape of the Tao. |
| % | Use % to define the shape of the corners. |
Specification rules for border-radius attribute values:
Four values: the first value is the upper left corner, the second The first value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
Three values: the first value is the upper left corner, the second value is the upper right corner and lower left corner, the third value The value is the lower right corner
Two values: the first value is the upper left corner and the lower right corner, the second value is the upper right corner One value with the lower left corner
: The four rounded corners have the same value
Example:
指定背景颜色元素的圆角:
圆角指定边框元素的圆角:
圆角指定背景图片元素的圆角:
圆角
Rendering:
(Learning video sharing:css video tutorial)
The above is the detailed content of What is the css property that sets the corner radius of an element?. For more information, please follow other related articles on the PHP Chinese website!
