How to make buttons round in css style-CSS Tutorial-php.cn

How to make buttons round in css style

藏色散人

Release： 2023-01-03 09:25:56

Original

8496 people have browsed it

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.

How to make buttons round in css style

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>

Copy after login

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;

Copy after login

! 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 Tutorial
"
The 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!