Генератор CSS border-radius

Визуально настройте 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 box-shadow

        
Визуально создавайте CSS-свойство box-shadow с помощью ползунков. Просматривайте...

      
      
      
        

          
        

        
Генератор CSS-градиентов

        
Создавайте линейные, радиальные и конические CSS-градиенты визуально. Добавляйте...

      
      
      
        

          
        

        
CSS Flexbox-песочница

        
Изучайте и экспериментируйте с CSS Flexbox. Настраивайте свойства контейнера и н...

      
      
      
        

          
        

        
Генератор CSS Grid

        
Визуально создавайте CSS Grid-макеты. Задайте строки, столбцы, отступы и скопиру...