CSS3 border-radius - 각 모서리 지정

CSS3 border-radius - 각 모서리 지정

border-radius속성에 대해 하나의 값만 지정하면 이 반지름이 네 모서리 모두에 적용됩니다.

그러나 원하는 경우 각 구석을 개별적으로 지정할 수 있습니다. 다음은 규칙입니다.

• 네 개의 값 : 첫 번째 값은 왼쪽 상단에 적용되고 두 번째 값은 오른쪽 상단에 적용되고 세 번째 값은 오른쪽 하단에 적용되고 네 번째 값은 왼쪽 하단에 적용됩니다.
• 세 가지 값 : 첫 번째 값은 왼쪽 상단에 적용되고 두 번째 값은 오른쪽 상단과 왼쪽 하단에 적용되고 세 번째 값은 오른쪽 하단에 적용됩니다.
• 두 값 : 첫 번째 값은 왼쪽 상단과 오른쪽 하단에 적용되고 두 번째 값은 오른쪽 상단과 왼쪽 하단에 적용됩니다.
• 하나의 가치 : 네 모퉁이는 똑같이 반올림됩니다.
  
  
  #rcorners4 {
      border-radius: 15px 50px 30px 5px;
      background: #73AD21;
      padding: 20px; 
      width: 200px;
      height: 150px; 
  }
  
  #rcorners5 {
      border-radius: 15px 50px 30px;
      background: #73AD21;
      padding: 20px; 
      width: 200px;
      height: 150px; 
  }
  
  #rcorners6 {
      border-radius: 15px 50px;
      background: #73AD21;
      padding: 20px; 
      width: 200px;
      height: 150px; 
  }
  
  타원형 모서리를 만들 수도 있습니다.
  
  #rcorners7 {
      border-radius: 50px/15px;
      background: #73AD21;
      padding: 20px; 
      width: 200px;
      height: 150px; 
  }
  
  #rcorners8 {
      border-radius: 15px/50px;
      background: #73AD21;
      padding: 20px; 
      width: 200px;
      height: 150px; 
  }
  
  #rcorners9 {
      border-radius: 50%;
      background: #73AD21;
      padding: 20px; 
      width: 200px;
      height: 150px;
  }
  
•