CSS 圆角生成器

可视化打造 CSS border-radius —— 可单独控制四个角，也可统一控制。可实时预览。

工作台 · 中性环境
20px

  




  


  
  

  
  
  
  

    
功能特性

    

      
      

        
        4-corner control
      

      
      

        
        Unified / independent mode
      

      
      

        
        Slider + number input
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

    
使用方法

    

      
        
        
1. 拖动半径滑块 —— 台面上的中性卡片以真实尺寸预览圆角。

        
        
2. 切换到「分角设置」可单独调整每个角。

        
        
3. 复制 CSS —— 输出采用最简写法。

        
      
    

  


  
  
  
  

    
常见问题

    
    

      What is border-radius?
      
The CSS border-radius property rounds the corners of an element's outer border edge.

    

    
  

  

  
  
  

    
相关工具

    

      
      
        

          
        

        
CSS 阴影生成器

        
用滑块可视化生成 CSS box-shadow 属性。可实时预览并复制 CSS 代码。...

      
      
      
        

          
        

        
CSS 渐变生成器

        
可视化生成 CSS 线性、径向和锥形渐变。可添加多个颜色节点并复制 CSS。...

      
      
      
        

          
        

        
CSS Flexbox 演练场

        
学习并体验 CSS Flexbox。调整容器属性即可看到布局实时变化。...

      
      
      
        

          
        

        
CSS Grid 生成器

        
可视化创建 CSS Grid 布局。设置行、列和间距，并复制生成的 CSS 与 HTML。...