Home > Article > Web Front-end > How to make the border round in html
How to make the border round in html
- 青灯夜游Original
- 2022-01-21 17:21:3017527browse
Method: 1. Use the width and height attributes to set the element to a square; 2. Use "border: border size solid color value;" to add a border to the square element; 3. Use "border-radius: 50% ;" statement makes the border round.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Change the border into a circle in html
1. Create a div element and set it to a square using the width and height attributes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 100px;
height: 100px;
background-color: #FFC0CB;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 
2. Add a border
div{
width: 100px;
height: 100px;
background-color: #FFC0CB;
border: 2px solid black;
}
3. Change the border into a circle
div{
width: 100px;
height: 100px;
background-color: #FFC0CB;
border: 2px solid black;
border-radius: 50%;
}
Related recommendations: "html video tutorial"
The above is the detailed content of How to make the border round in html. For more information, please follow other related articles on the PHP Chinese website!