a11y.skipToMainContent
1

CSS 국경 반경 발전기

시각적으로 CSS 라운드 모서리의 다이얼 - 각 코너를 독립적으로 설정하고, 스위치 단위를 설정하고 깨끗한 경계 반경 CSS를 복사합니다.

Unit

Corner radius

px
px
px
px

Preview size

%
px

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Border Radius Generator

  1. 각 코너 슬라이더 (또는 값을 입력)를 드래그하여 상단 왼쪽, 상단 오른쪽, 하단 오른쪽 및 하단 왼쪽의 반경을 설정합니다.
  2. 단위 선택 — px, % 또는 em — 선택적으로 Link를 사용하여 모든 구석을 함께 이동합니다.
  3. Elliptical / 유기 blob에서 blob 모양의 코너 당 두 번째 수직 반경을 추가합니다.
  4. 복사 CSS를 클릭하여 준비-to-paste 국경-radius 선언을 잡아라.

테두리 반경 생성기은 무엇입니까?

The CSS border-radius 속성은 요소 상자의 모서리를 돌립니다. 이 발전기는 모든 4 개의 모서리를 제어 할 수 있습니다. 왼쪽, 오른쪽 상단, 하단 오른쪽 및 하단 왼쪽 - 독립적으로, 라이브 미리보기와 함께, 당신은 그것을 tweak으로 모양을 볼 수 있습니다.

Switch 사이 px, %em 단위, 또는 elliptical 모드를 사용하여 각 코너 분리 수평 및 수직 레이디를 제공 할 수 있습니다. ( BRb> BRv TL / BRv TL / BRv TLv TLv TLv TLv TLv TLv TLv TLv 이것은 유기 "blob" 모양이 만드는 방법입니다. 코너가 일치할 때, 출력은 가장 짧은 유효한 단락으로 자동적으로 붕괴합니다.

Advertisement

FAQ

국경 반경 구문은 무엇입니까?
슬래시는 수직 레이디에서 수평 레이디를 분리합니다. 국경 반경: 50px/20px는 각 구석에게 50px 수평한과 20px 수직 곡선을 주고, 타원형 둥근을 일으키. 각 측에 4개의 가치로 당신은 유기 blob 모양을 기술할 수 있습니다.
Px 또는 비율을 사용해야합니까?
Px를 사용하여 고정, 요소 크기에 관계없이 예측 가능한 모서리. 예를 들어, 경계 반경 : 평방의 50 %는 완벽한 원형을 만듭니다.
이 모든 브라우저에서 작동합니까?
예. 국경 반경은 elliptical slash 구문을 포함하여 접두사없이 모든 현대 브라우저에서 지원됩니다. 공급 업체 접두사가 필요하지 않습니다.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement