border-radius method to add 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).

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:

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*/
      }

Complete code

<!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/>
  <!--Task section-->
  <div class="semi-circle">
  </div>

    </body>
  </html>

This is the end of this article about the border-radius method of adding rounded borders to elements. For more related border-radius rounded border content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: A detailed introduction to the use of block comments in HTML

>>: Detailed explanation of webpage screenshot function in Vue