KOENJP

보더 레디어스 CSS 생성기 (블롭 도형)

BORDER · RADIUS

네 모서리를 따로 또는 한꺼번에 둥글게 하고, 가로 · 세로 8값 문법으로 손잡이를 끌어 말랑한 블롭 도형을 만들어요. 알약 · 물방울 · 나뭇잎 프리셋과 border-radius 코드를 복사해요.

프리셋

미리보기

모서리

단위

CSS


    


    
이 브라우저 안에서만 처리돼요. 서버로 보내지 않아요.

  

  







  

    

      HOW TO
      
사용 방법

      
    
      
  1. 프리셋(둥근 모서리 · 알약 · 원 · 물방울 · 블롭 등)을 골라 시작해요.
    2. 
      
  2. 모서리 4개 모드에서 단위(px · %)를 고르고 모서리를 하나씩, 또는 '네 모서리 같이'로 한꺼번에 조절해요.
    3. 
      
  3. 자유 도형 (8값) 모드에서는 미리보기의 손잡이 8개를 끌거나 슬라이더로 가로 · 세로 반지름을 따로 정해요. 🎲로 무작위 모양도 만들어요.
    4. 
      
  4. 너비 · 높이 · 색을 바꿔 확인하고 코드 복사를 눌러요.
    5. 
      

    

    

      PAIRS WELL WITH
      
같이 쓰기 좋은 도구

      
    

  

  
  

    FAQ
    
자주 묻는 질문

    
8값 문법이 뭐예요?
border-radius: 가로 4값 / 세로 4값 형태로, 모서리마다 가로와 세로 반지름을 다르게 줘서 타원 모서리를 만들어요. 블롭 같은 자유로운 모양에 써요.

    
%와 px는 뭐가 달라요?
px는 크기와 상관없이 같은 둥글기이고, %는 요소 너비 · 높이에 비례해요. 50%면 정사각형은 원, 직사각형은 타원이 돼요.

    
손잡이는 키보드로도 움직일 수 있나요?
네. 손잡이를 Tab으로 고른 뒤 화살표 키로 1%씩, Shift와 함께 누르면 10%씩 움직여요.