모서리 둥글기 생성
Border Radius Generator
모서리마다 값을 따로 주고 두 값 문법의 곡선 형태까지 만들어 CSS로 내보냅니다.
상자의 모서리를 둥글게 합니다. 여덟 개 반지름 값을 모두 쓸 수 있고, "이걸 스퀘어클로 만들어 줘"가 같은 질문으로 들어오기 때문에 `border-radius`로는 못 그리는 진짜 초타원과 `clip-path` 모양도 함께 그립니다.
미리보기
CSS
모서리
왼쪽 위
오른쪽 위
오른쪽 아래
왼쪽 아래
미리 설정
clip-path
역할이 다른 별개의 속성입니다. border-radius는 상자의 모서리를 둥글게 하고, clip-path는 임의의 모양으로 잘라 내며 그림자까지 함께 가져갑니다.
사용 방법
모서리 슬라이더를 움직입니다
네 모서리를 px이나 퍼센트로 조절합니다. 미리보기와 선언이 함께 갱신됩니다.
덩어리 모양이 필요하면 가로·세로 같게를 끕니다
그러면 슬래시가 들어간 여덟 값 형태가 되어, 모서리마다 가로 반지름과 세로 반지름을 따로 줍니다. 유기적인 덩어리 모양은 전부 그 형태에서 나옵니다.
사각형이 아니면 clip-path로 바꿉니다
원, 다각형, 말풍선, 화살표 같은 것들과 초타원 슬라이더가 있습니다. 더 둥근 사각형이 아니라 진짜 스퀘어클 곡선입니다.
자주 묻는 질문
9999px 반지름이 왜 50%와 똑같아 보이나요?
한 변에서 반지름이 겹치게 되면 규격이 네 모서리 전부를 같은 비율로 줄여서 맞추기 때문입니다. 그래서 터무니없이 큰 값은 전부 같은 모양이 됩니다. 페이지가 어떤 비율로 줄였는지 보여 줍니다.
CSS로 진짜 스퀘어클을 그릴 수 있나요?
`border-radius`로는 안 됩니다. 그 모서리는 엄밀히 타원이라, 반지름에 "스퀘어클 슬라이더"를 붙여 봐야 조금 더 둥근 사각형입니다. 여기 초타원은 `clip-path` 폴리곤으로 그립니다. 지금 그 곡선을 얻는 정직한 방법입니다.
clip-path를 쓰니 그림자가 왜 사라졌나요?
`clip-path`가 요소를 잘라 내는데 그림자는 요소 바깥에 그려지기 때문입니다. 넘치는 자식 요소도 함께 잘립니다. `border-radius`는 둘 다 하지 않습니다. 모양이 둥근 사각형이라면 계속 이쪽이 맞는 이유입니다.
묶음의 바깥쪽 모서리만 둥글게 하려면요?
컨테이너를 둥글게 하고 `overflow: hidden`을 주거나, 항목에 `:first-child`·`:last-child`를 씁니다. 묶음 자체에 모서리별 반지름을 줘도 자식에게는 닿지 않습니다. 버튼 묶음에서 대개 그것 때문에 틀어집니다.
이 도구로 이어지는 것
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
유동 크기 clamp 계산
Fluid Size Calculator
두 화면 너비 사이에서 크기가 매끄럽게 변하는 clamp() 식을 계산합니다.
CSS 정렬·압축
CSS Beautifier & Minifier
선언 순서를 바꾸지 않고 CSS를 정렬하거나 압축하며, 토큰 구성을 그대로 보존합니다.
그림자 CSS 생성
Box Shadow Generator
여러 겹의 박스·텍스트 그림자를 미리보기와 함께 구성하고 CSS로 내보냅니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.
색상 선택기
Colour Picker
OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.
명도대비 검사
Contrast Checker
전경·배경 색 조합을 WCAG 2와 APCA 기준으로 채점하고 통과하는 가장 가까운 색을 제안합니다.