如何使用 CSS 制作圆角？

为了创建一个圆角，我们使用 CSS 的border-radius属性。该属性用于设置元素的边框半径。

句法：

/* It sets the radius value to all 4 corners */
border-radius: value;

示例 1：此示例描述了用于制作圆角的边框半径。

HTML

  

    
    
    
     
    

  

    
GeeksforGeeks
    

        
 Rounded corner
    

  

输出：

圆角

示例 2：此示例描述了使用border-bottom-left-radius 属性在左下角制作圆角。

HTML

  

    
    
    
     
    

  

    
GeeksforGeeks
    

        
 
            This is Rounded corner at bottom left
        
    

  

输出：

示例 3：此示例描述了使用border-top-right-radius 属性在右上角制作圆角。

HTML

  

    
    
    
     
    

  

    
GeeksforGeeks
    

        
 
            This is Rounded corner at top right
        
    

  

输出：

示例 4：本示例描述了使用border-bottom-right-radius 属性来制作右下角的圆角。

HTML

  

    
    
    
     
    

  

    
GeeksforGeeks
    

        
 
            This is Rounded corner at bottom right
        
    

  

输出：

示例 5：此示例描述了使用border-top-left-radius 属性来制作左上角的角。

HTML

  

    
    
    
     
    

  

    
GeeksforGeeks
    

        
 
            This is Rounded corner at top left
        
    

  

输出：

左上方

速记：

将半径值应用于所有四个角：

border-radius: value; 

将 value1 应用于左上角和右下角，将 value2 应用于右上角和左下角。

border-radius: value1 value2; 

将 value1 应用于左上角，将 value2 应用于右上角和左下角，将 value3 应用于右下角。

border-radius: value1 value2 value3; 

将 value1 应用于左上角，将 value2 应用于右上角，将 value3 应用于右下角，将 value4 应用于左下角。

border-radius: value1 value2 value3 value4;