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 왼쪽 하단 경계선의 모양을 정의합니다.