同时设置两个方向的的圆角半径 此时的内容区为正方形

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         div{
    9.             width: 200px;
    10.             height: 200px;
    11.             background: black;
    12.             position: absolute;
    13.             left: calc(50% - 100px);
    14.             top: 200px;
    15.             border-top-left-radius: 200px 200px;
    17.         }
    18.     </style>
    19. </head>
    20. <body>
    21.     <div></div>
    22. </body>
    23. </html>

    效果如下图
    image.png
    当其为长方形时

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         div{
    9.             width: 200px;
    10.             height: 100px;
    11.             background: black;
    12.             position: absolute;
    13.             left: calc(50% - 100px);
    14.             top: 200px;
    15.             border-top-left-radius: 200px 200px;
    16.             border-top-right-radius: 200px 200px;
    18.         }
    19.     </style>
    20. </head>
    21. <body>
    22.     <div></div>
    23. </body>
    24. </html>

    效果如下图
    image.png
    简易方式设置
    border-radius: 200px 0 200px 0 / 100px 0 100px 0;
    参数 top top bottom bottom / left right right left

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         div{
    9.             width: 200px;
    10.             height: 100px;
    11.             background: black;
    12.             position: absolute;
    13.             left: calc(50% - 100px);
    14.             top: 200px;
    15.             border-radius: 200px 0 200px 0 / 100px 0 100px 0;
    16.             /* top left */
    17.             /* top right */
    18.             /* bottom  right*/
    19.             /* bottom  left */
    20.           /*参数  top top bottom bottom / left right right left*/
    22.         }
    23.     </style>
    24. </head>
    25. <body>
    26.     <div></div>
    27. </body>
    28. </html>

    效果图
    image.png
    示例2

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         div{
    9.             width: 200px;
    10.             height: 100px;
    11.             background: black;
    12.             position: absolute;
    13.             left: calc(50% - 100px);
    14.             top: 200px;
    15.             border-radius: 200px 0 200px 0 / 200px 0 200px 0;
    16.             /* top left */
    17.             /* top right */
    18.             /* bottom  right*/
    19.             /* bottom  left */ 
    20.         }
    21.     </style>
    22. </head>
    23. <body>
    24.     <div></div>
    25. </body>
    26. </html>

    效果图如下
    image.png

    index.html //border拓展
    实现效果如下
    image.png