CSS 둥근 모서리

❮ 이전의 다음 ❯

CSS 둥근 모서리

CSS border-radius속성을 사용하면 모든 요소에 "둥근 모서리"를 부여할 수 있습니다.

CSS 테두리 반경 속성

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-radius1~4개의 값을 가질 수 있습니다. 규칙은 다음과 같습니다.

4가지 값 - 테두리 반경: 15px 50px 30px 5px; (첫 번째 값은 왼쪽 상단 모서리에 적용, 두 번째 값은 오른쪽 상단 모서리에 적용, 세 번째 값은 오른쪽 하단 모서리에 적용, 네 번째 값은 왼쪽 하단 모서리에 적용):

세 가지 값 - 테두리 반경: 15px 50px 30px; (첫 번째 값은 왼쪽 상단 모서리에 적용, 두 번째 값은 오른쪽 상단 및 왼쪽 하단 모서리에 적용, 세 번째 값은 오른쪽 하단 모서리에 적용):

두 가지 값 - 테두리 반경: 15px 50px; (첫 번째 값은 상단 왼쪽 및 하단 오른쪽 모서리에 적용되고 두 번째 값은 상단 오른쪽 및 하단 왼쪽 모서리에 적용됨):

하나의 값 - 테두리 반경: 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;
}