Home > Article > Web Front-end > How to set a circle in css
How to set a circle in css
- PHPzOriginal
- 2023-04-23 16:36:003698browse
CSS is the abbreviation of Cascading Style Sheet, which is a style sheet language used to define the style of HTML pages. Among them, setting a circle is a basic operation in CSS.
In CSS, we can use the border-radius property to set a circle. This property controls the angle of an element, making its corners rounded. By using border-radius, we can set the rounded corners of an element by setting the same value. At the same time, we can also use one value to set different corners, or multiple values to set different angles.
For example, in the following code, we use the border-radius property to turn a rectangle into a circle:
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
Here, we set the border-radius to 50%, which is the width and half the height. This will round the corners of the element, resulting in a rounded shape.
If we want to set different angles, we can use code similar to the following:
.custom-shape {
width: 100px;
height: 100px;
border-radius: 50px 60px 70px 80px;
background-color: blue;
}
Here, we set border-radius to a four-value attribute to set different angles respectively. This will make the angles of the top left and bottom right corners 50px, the angles of the top right and bottom left corners 60px, the next setting to 70px, and the previous setting to 80px.
If we want to add a circular border to the element, we can set the width and style in the border attribute, for example:
.circle-border {
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid black;
background-color: green;
}
Here, we use the border attribute to set the border of the element. This will cause a 5 pixel wide black border to appear around the element, while the element will remain rounded.
In practical applications, we can use circular elements as buttons, icons or avatars, etc. By using CSS, we can easily achieve these effects while maintaining the beauty and readability of the page.
The above is the detailed content of How to set a circle in css. For more information, please follow other related articles on the PHP Chinese website!