CSS 둥근 모서리

CSS 둥근 모서리

CSS를 통해 border-radius 속성은 어떤 요소의 '둥근 모서리' 스타일을 구현할 수 있습니다.

CSS border-radius 속성

CSS border-radius 속성은 요소 모서리의 반지름을 정의합니다。

추가 정보：이 속성을 사용하여 요소에 둥근 모서리를 추가할 수 있습니다!

여기서 세 가지 예제가 있습니다：

1. 배경색이 지정된 요소의 둥근 모서리：

둥근 모서리!

2. 테두리가 있는 요소의 둥근 모서리：

둥근 모서리!

3. 배경 이미지가 있는 요소의 둥근 모서리：

둥근 모서리!

이 코드는 다음과 같습니다:

예제

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

자신이 직접 시도해 보세요

추가 정보：border-radius 속성은 다음 속성의 간단한 표현입니다：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - 각 모서리 지정

border-radius 속성은 하나에서 네 개의 값을 받을 수 있습니다. 규칙은 다음과 같습니다：

چهار 개의 값 - border-radius: 15px 50px 30px 5px;（각각 왼쪽 상단 모서리, 오른쪽 상단 모서리, 오른쪽 하단 모서리, 왼쪽 하단 모서리에 순서대로 사용됩니다）：

세 개의 값 - border-radius: 15px 50px 30px;（첫 번째 값은 왼쪽 상단 모서리에 사용되며 두 번째 값은 오른쪽 상단 모서리와 왼쪽 하단 모서리에 사용되며 세 번째 값은 오른쪽 하단 모서리에 사용됩니다）：

두 개의 값 - border-radius: 15px 50px;（첫 번째 값은 왼쪽 상단 모서리와 오른쪽 하단 모서리에 사용되며 두 번째 값은 오른쪽 상단 모서리와 왼쪽 하단 모서리에 사용됩니다）：

한 개의 값 - border-radius: 15px;（이 값은 모든 네 가지 모서리에 사용되며 모든 모서리는 둥근각입니다）：

이 코드는 다음과 같습니다:

예제

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

자신이 직접 시도해 보세요

椭圆形 모서리를 생성할 수도 있습니다:

예제

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

자신이 직접 시도해 보세요

CSS 둥근角 속성

속성 설명
border-radius 모든 네 개의 border-*-*-radius 속성을 설정하는 간단한 속성입니다.
border-top-left-radius 왼쪽 위 모서리의 경계선 모양을 정의합니다.
border-top-right-radius 오른쪽 위 모서리의 경계선 모양을 정의합니다.
border-bottom-right-radius 오른쪽 아래 모서리의 경계선 모양을 정의합니다.
border-bottom-left-radius 왼쪽 아래 모서리의 경계선 모양을 정의합니다.