Home > Article > Web Front-end > How to make buttons round in css style
How to make a button round using css style: First create an HTML sample file; then define a button button; and finally set the four corners of the button to rounded corners through the "border-radius" attribute in css.
The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
Turn the button into a circle (with radian)
border-radius can turn the button into a circle, or add a radian border to p
border-radius rules:
One value: The four rounded corners have the same value
Two values: the first value is the upper left corner and the lower right corner, The second value is the upper right corner and the lower left corner. Three values: the first value is the upper left corner, the second value is the upper right corner and the lower left corner, and the third value is the lower right corner.
Four values: The first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
Style:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
width: 100px;
height: 30px;
background: green;
border: none;
color: white;
margin: 6px 10px;
}
.btnStyle1{
border-radius: 6px;
}
.btnStyle2{
border-radius: 26px 6px;
}
.btnStyle3{
border-radius: 6px 26px 60px;
}
.btnStyle4{
border-radius: 6px 126px 236px 346px;
}
.bolder{
border: solid 1px green;
width: 500px;
height: 40px;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="bolder">
<button class="btn btnStyle1">按钮1</button>
<button class="btn btnStyle2">按钮2</button>
<button class="btn btnStyle3">按钮3</button>
<button class="btn btnStyle4">按钮4</button>
</p>
</body>
</html>
Sometimes border-radius will fail
Solution: Universal !important;
Add
!important in the border-radius attribute to let the browser execute this statement first border-radius: 6px !important;
! in CSS! important is generally used for hacking on lower versions except iE 6. It is followed by the !important css statement to let the browser execute this statement first, because css has inherited styles, adding !importanrt can Overrides the parent's style.
Recommended: "
HTML Video TutorialThe above is the detailed content of How to make buttons round in css style. For more information, please follow other related articles on the PHP Chinese website!