CSS 둥근 모서리 테두리 생성기

왼쪽 상단(px):
오른쪽 상단(px):
오른쪽 하단(px):
왼쪽 하단(px):

什么是CSS 둥근 모서리 테두리 생성기

CSS 둥근 모서리 테두리 생성기는 CSS 테두리 반경을 생성하는 도구를 제공하며, 네 방향의 모서리 값을 입력하여 효과를 확인하고 CSS 코드를 생성할 수 있습니다.

CSS3 border-radius 속성

속성설명
border-radius요소 테두리 반경을 정의합니다.
border-top-left-radius왼쪽 위 모서리의 반경을 정의합니다.
border-top-right-radius오른쪽 위 모서리의 반경을 정의합니다.
border-bottom-right-radius오른쪽 아래 모서리의 반경을 정의합니다.
border-bottom-left-radius왼쪽 아래 모서리의 반경을 정의합니다.

우리의 도구는 첫 번째 형식을 사용하며, 이는 다른 문법의 축약형입니다. 예:

border-radius: 10px 10px 10px 10px; 

첫 번째 값은 왼쪽 위 모서리에 적용되고, 두 번째 값은 오른쪽 위 모서리에, 세 번째 값은 오른쪽 아래 모서리에, 네 번째 값은 왼쪽 아래 모서리에 적용됩니다.

CSS 둥근 모서리 테두리 생성기를 어떻게 사용합니까?

  1. 왼쪽 위(px), 오른쪽 위(px), 오른쪽 아래(px), 왼쪽 아래(px) 속성 값을 설정합니다.
  2. 생성된 코드와 효과가 왼쪽 영역에 표시됩니다.
  3. "복사" 버튼을 클릭하여 CSS 테두리 반경 코드를 복사합니다.