CSS Border Radius 생성기
복잡한 CSS border-radius 값을 시각적으로 만듭니다. 각 모서리를 독립적으로 제어합니다.
border-radius: 20px 20px 20px 20px;
CSS Border Radius 생성기란 무엇인가요?
CSS의 border-radius 속성은 모서리당 하나씩 최대 네 개의 값을 받으며, 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서입니다. 서로 다른 반경을 조합하여 물방울 같은 유기적인 형태, 비대칭 카드, 말풍선 스타일을 만들 수 있습니다. 이 도구를 사용하면 슬라이더로 각 모서리를 조정하고 결과를 실시간으로 확인할 수 있습니다.
자주 묻는 질문
타원형 반경은 어떤가요?▼
border-radius는 /로 구분된 모서리당 두 개의 값도 지원하여, 원 대신 타원을 만듭니다. 기본적인 사용에는 모서리당 하나의 값으로 충분합니다.
관련 도구
색상 변환기 (HEX/RGB/HSL)
HEX, RGB, HSL 형식 간에 색상을 변환합니다. 색상을 시각적으로 선택하거나 값을 직접 입력하세요.
CSS Box Shadow 생성기
CSS box-shadow 값을 시각적으로 만듭니다. 실시간으로 미리 보고 생성된 CSS를 복사하세요.
CSS 그라데이션 생성기
선형 및 방사형 CSS 그라데이션을 만듭니다. 색상을 시각적으로 선택하고 생성된 CSS를 복사하세요.
Cubic Bezier 가속 곡선 생성기
CSS용 cubic-bezier 가속 곡선을 만듭니다. 표준 사전 설정이 포함되어 있습니다.
색상 팔레트 생성기
임의의 기준 색상에서 조화로운 색상 팔레트를 생성합니다. 보색, 유사색, 삼색조, 단색 배색을 지원합니다.
CSS Clamp() 생성기
clamp()로 유동적이고 반응형인 CSS 값을 생성합니다. 뷰포트 범위에 걸쳐 최소 크기와 최대 크기 사이를 부드럽게 조정합니다.