How to make a quarter circle in css

How to make a quarter circle in css: 1. Use the width and height attributes to set the width and height of the element to be equal; 2. Use the border-radius attribute to set the value of a rounded corner of the element to the width and height value. The value of the other three rounded corners is 0, and the syntax is "border-radius: width or height value 0 0 0;".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, when it comes to making circles, the border-radius attribute comes to mind.

This attribute can turn a square element with equal width and height into a circle

p {
	width: 50px;
	height: 50px;
	background-color: #0000FF;
	border-radius: 50px;
}

<p></p>

But sometimes we don’t need a full circle, just a part of it , using a quarter circle, how to do this?

Still use the border-radius attribute to set the value of one rounded corner of the element to the width or height value, and the value of the other three rounded corners to 0:

border-radius: 50px 0 0 0;

border-radius: 0 50px 0 0;

border-radius: 0 0 50px 0;

border-radius: 0 0 0 50px;

（Learning video sharing: css video tutorial）

The above is the detailed content of How to make a quarter circle in css. For more information, please follow other related articles on the PHP Chinese website!