다플 로고다플 도구모음
⬜
개발자 도구

Border Radius 생성기

8방향 모서리를 개별로 조절하고 실시간으로 모양을 확인하세요.

모서리 동기화

켜면 4개 모서리가 함께 변경됩니다

반경 조절

px
px
px
px

프리셋

미리보기

색상
TL: 16pxTR: 16pxBL: 16pxBR: 16px
border-radius: 16px

CSS 코드

border-radius (shorthand)
border-radius: 16px;
border-radius (longhand)
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;
Tailwind CSS
rounded-2xl

공유하기

공유하기

Border Radius 생성기 이용 안내

Border Radius 생성기란?

8방향 radius를 개별 조절하고 실시간으로 모양을 미리보세요. CSS와 Tailwind 코드를 바로 복사할 수 있어요.

네 모서리의 가로·세로 반지름 8개 값을 개별로 움직여 원형, 타원형과 비대칭 도형의 border-radius 코드를 생성합니다.

Border Radius 생성기 사용 방법

  1. 1

    입력 준비

    둥글기를 적용할 도형을 미리보기에서 확인하고 기본 반지름을 정하세요.

  2. 2

    옵션 설정

    네 모서리의 가로·세로 반지름 값을 개별 또는 함께 조절하세요.

  3. 3

    결과 확인

    도형 모양을 확인하고 생성된 border-radius CSS나 Tailwind 값을 복사하세요.

기능과 사용 전 확인사항

처리 범위

일괄 둥글기뿐 아니라 슬래시로 구분되는 타원 반지름을 시각적으로 조절하고 CSS와 Tailwind 형식의 결과를 복사할 수 있습니다.

사용 전 확인

같은 반지름도 요소의 가로·세로 크기에 따라 모양이 달라집니다. 실제 컴포넌트 치수와 overflow 처리 상태에서 확인하세요.

자주 묻는 질문

모서리마다 다른 둥글기를 설정할 수 있나요?

네 모서리의 가로·세로 반지름 값을 개별로 조절해 비대칭 모양을 만들 수 있습니다. 가로와 세로 반지름을 분리하면 단순한 둥근 사각형뿐 아니라 잎이나 물방울에 가까운 비대칭 형태도 만들 수 있습니다.

타원형 Border Radius도 만들 수 있나요?

가로 반지름과 세로 반지름을 다르게 지정해 원형이나 타원형에 가까운 모서리를 만들 수 있습니다. 슬래시 앞뒤 값은 각각 가로·세로 반지름이며 요소 크기가 바뀌면 같은 값도 다른 곡선으로 보입니다.

생성된 값은 어떻게 사용하나요?

미리보기 모양을 확인하고 생성된 `border-radius` CSS 또는 Tailwind 코드를 복사해 적용하세요. overflow가 보이는 요소에서는 자식 배경이 둥근 모서리 밖으로 나올 수 있어 필요하면 `overflow: hidden`을 함께 검토하세요.

관련 글

Border Radius 생성기 사용법과 활용 방법

둥글기를 적용할 도형을 미리보기에서 확인하고 기본 반지름을 정하세요. 네 모서리의 가로·세로 반지름 값을 개별 또는 함께 조절하세요. 도형 모양을 확인하고 생성된 border-radius CSS나 Tailwind 값을 복사하세요.

Cron 표현식 생성기 사용법과 활용 방법

작업을 실행할 분, 시, 일, 월과 요일 조건을 선택하세요. 매번·특정 시각·간격 실행 조건을 조합하고 대상 시스템의 시간대를 확인하세요. 생성된 5필드 Cron 표현식과 한국어 실행 주기 설명이 의도와 같은지 비교하세요.

JWT 디코더 사용법과 활용 방법

분석할 JWT 문자열 전체를 입력란에 붙여 넣으세요. Header·Payload 탭과 exp·iat·nbf 시간 표시 방식을 선택해 값을 살펴보세요. 알고리즘과 클레임, 발급·만료 시간을 확인하되 별도의 서명 검증이 필요함을 기억하세요.