Border-radius 생성기
시각적 미리보기로 CSS 둥근 모서리 생성.
Esquinas (horizontal)
border-radius: 16px;CSS Border-radius 생성기: 작동 방식
border-radius 속성은 HTML 요소의 모서리를 둥글게 만들 수 있습니다. 표준 구문은 4개의 값(각 모서리에 하나)을 허용하며, 고급 구문은 8개의 값(수평 4개 + 수직 4개, "/"로 구분)을 사용하여 타원형 모서리를 만들 수 있습니다.
이 속성은 매우 다재다능합니다: 동일 너비와 높이에 50%를 적용하면 완벽한 원이 되고, 직사각형에 큰 값을 적용하면 알약 형태가 되며, 비대칭 값을 사용하면 방울이나 유기적 형태를 만들 수 있습니다.
우리 생성기를 사용하면 각 모서리를 독립적으로 슬라이더로 조정하면서 변경 사항을 실시간으로 미리볼 수 있습니다. CSS 코드를 복사하여 프로젝트에 바로 붙여넣을 수 있습니다.
자주 묻는 질문
타원형 border-radius란 무엇인가요?
타원형 border-radius는 8개 값 구문을 사용합니다: 처음 4개는 수평 반경, 나머지 4개는 수직 반경을 정의하며 "/"로 구분됩니다. 이를 통해 비대칭 곡선을 가진 모서리를 만들 수 있어, 기본 border-radius보다 더 복잡한 유기적 형태를 만들 수 있습니다.
완벽한 원을 어떻게 만드나요?
완벽한 원을 만들려면 너비와 높이가 같은 요소에 border-radius: 50%를 설정하세요. 우리 생성기에서는 "알약" 프리셋(모든 모서리 100px)을 사용하고 요소가 정사각형인지 확인하세요.
모든 브라우저와 호환되나요?
네, border-radius는 Chrome, Firefox, Safari, Edge, Opera를 포함한 모든 최신 브라우저에서 수년간 호환되어 왔습니다. 현재 어떤 브라우저에서도 벤더 접두사가 필요하지 않습니다.