Home > Article > Web Front-end > How to achieve rounded corners in css3
How to achieve rounded corners in css3
- 藏色散人Original
- 2021-04-29 09:29:362541browse
Css3 method to achieve rounded corners: first create an HTML sample file; then enter the HTML structure code; then create a div in the body; finally set the "border:2px solid #a1a1a1;" style to the div You can achieve rounded corners.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
How to achieve rounded corners in css3?
The border-radius property is a shorthand property for setting the four border-*-radius properties.
Tip: This attribute allows you to add rounded borders to elements!
Add rounded borders to div elements:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html> Effect:
More detailed HTML/CSS knowledge, Please visit the CSS video tutorial column!
The above is the detailed content of How to achieve rounded corners in css3. For more information, please follow other related articles on the PHP Chinese website!