CSS border-radius 생성기
CSS border-radius를 라이브 미리보기로 시각적으로 생성합니다. 각 모서리를 개별 조정. 타원형 모서리 지원. CSS 코드 복사. 무료, 100% 브라우저에서 실행.
미리보기
CSS 출력
참고
CSS border-radius란?
border-radius 속성은 요소의 모서리를 둥글게 만듭니다. 4개의 모서리에 각각 다른 값을 설정할 수 있으며, 픽셀, 퍼센트 또는 기타 CSS 단위로 지정합니다. 50%로 설정하면 요소가 원 또는 타원이 됩니다.
구문
값 1개 — border-radius: 10px으로 모든 모서리에 동일한 둥근 처리 적용. 값 4개 — border-radius: 10px 20px 30px 40px으로 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단 순서로 지정. 축약형 — 2개 또는 3개의 값으로 대각선 모서리를 묶어서 지정 가능.
타원형 모서리
타원형 모서리는 수평과 수직에 다른 반경을 지정하여 만듭니다. border-radius: 50px / 25px처럼 슬래시로 수평 반경과 수직 반경을 구분합니다. 이를 통해 비대칭 곡선을 만들 수 있어 유기적인 형태에 유용합니다.
개인정보보호
모든 생성 처리는 브라우저에서 100% 실행됩니다. 데이터는 서버에 전송되지 않습니다.