border-radius is a method for adding rounded borders to elements

border-radius:10px; /* All corners are rounded with a radius of 10px*/

border-radius: 5px 4px 3px 2px; /* The four radius values are the upper left corner, upper right corner, lower right corner and lower left corner, clockwise*/

Don’t think that border-radius values can only be expressed in px units. You can also use percentages or ems, but the compatibility is not very good at the moment.

Solid upper semicircle:

Method: Set the height to half of the width, and only set the radius of the upper left and upper right corners to match the height of the element (it can be larger).

XML/HTML CodeCopy content to clipboard

div{
height:50px;/*half of width*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*The radius should be at least the value of height*/
}

Filled circle:

Method: Set the width and height values to be consistent (that is, a square), and set the four corner radius values to half of their values.

The following code:

CSS CodeCopy content to clipboard

div{
　　height : 100px ; /*same as width setting*/
　　width : 100px ;
　　background : #9da ;
　　border -radius: 50px ; /*The four corner radius values are all set to half of the width or height value*/
}

XML/HTML CodeCopy content to clipboard

<!doctype html >
< html >
< head >
< meta charset = "utf-8" >
< title > border-radius </ www.dztcsd.com /title >
< style type = "text/css" >
div.circle{
height:100px;/*same as width setting*/
width:100px;
background:#9da;
border-radius:50px;/*The four corner radius values are all set to half of the width or height value*/
}
/*Task part*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:?;
}
</ style >
</ head >
< body >
< div class = "circle" >
</ div >
< br />
< div class = "semi-circle" >
</ div >
</ body >
</ html >

The above is all the content of the border-radius method for adding rounded borders to elements. I hope it will be helpful to everyone. Please support 123WORDPRESS.COM~

<<: JavaScript to achieve balance digital scrolling effect

>>: Detailed explanation of how to synchronize data from MySQL to Elasticsearch