한눈에 보는 정의
카드·버튼·이미지 같은 요소의 모서리를 둥글게 깎는 CSS 효과. border-radius 속성으로 지정한다.
이런 말로 들어요
- 버튼은 라운드를 좀 더 크게 주세요.
- 카드랑 이미지 모서리 둥근 값이 달라서 어색해요.
그림으로 보기
border-radius 값이 작으면 단정하고 크면 부드러워 보입니다. 버튼·카드·이미지별로 값을 정해 두면 통일감이 생깁니다.
하캄솔루션 자체 제작 설명도식직접 해 보기
상담 안내신청하기
50% = 원
상담 신청999px = 알약
border-radius: 12px;자세히 알아보기
둥근 모서리는 화면의 인상을 크게 바꿉니다. 값이 작으면 단정하고, 크면 부드럽고 친근해 보입니다. 값을 높이의 절반 이상으로 주면 버튼 양 끝이 완전히 둥근 알약 모양이 되고, 정사각형에 50%를 주면 원이 됩니다. 사이트 안에서 버튼, 카드, 입력칸의 둥근 정도를 몇 가지 값으로 맞춰 두면 통일감이 생깁니다.
실무 예시
예를 들어 카드는 border-radius: 12px, 버튼은 999px(알약 모양), 프로필 사진은 50%(원)처럼 역할별로 값을 정해 둡니다.
함께 살펴볼 점
안쪽 이미지에 둥근 모서리를 주지 않으면 카드 모서리 밖으로 사진 귀퉁이가 튀어나올 수 있습니다. 이때는 카드에 overflow: hidden을 함께 줍니다.
AI에게 이렇게 요청해 보세요
사이트 전체의 둥근 모서리 값을 정리해 줘. 버튼, 카드, 입력칸, 이미지별로 border-radius 값을 정하고 CSS 변수로 만들어 한곳에서 바꿀 수 있게 해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- border-radius - MDN 새 창
border-radius가 요소 바깥 테두리의 모서리를 둥글게 만들며, 길이나 백분율로 값을 지정한다는 설명을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정