테두리 관련 CSS - border-radius

테두리 관련 CSS - border-radius

• border-radius 속성을 이용하면 박스 모서리 부분을 손쉽게 다양한 형태로 처리할 수 있습니다.
• 기본형 : border-top-left-radius : < 크기 > / < 백분율 >
  border-top-right-radius : < 크기 > / < 백분율 >
  border-bottom-right-radius : < 크기 > / < 백분율 >
  border-bottom-left-radius : < 크기 > / < 백분율 >
  border-radius : < 크기 > / < 백분율 >
• 둥글게 만들고 싶은 박스 모서리의 두 방향과 반지름을 뜻하는 radius를 사용해 속성을 표기합니다.

속성 값	설명
< 크기 >	둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시합니다.
< 백분율 >	현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정합니다.

border-radius: 20px;

border-radius: 20px;

border-top-left-radius : 20px; border-bottom-right-radius : 20px;           

 

<style>
    .exam1 {
        width: 250px; height: 150px;
        border: 2px solid red;
        border-radius: 20px;
        margin-bottom: 30px;
    }
    .exam2 {
        width: 250px; height: 150px;
        border: 2px solid red;
        border-radius: 20px;
        background: url(img/tree.jpg) no-repeat;
        background-size: cover;
        margin-bottom: 30px;
        }
    .exam3 {
        width: 250px; height: 150px;
        border: 2px solid blue;
        border-top-left-radius : 20px;
        border-bottom-right-radius: 20px;
</style>      

타원 형태로 둥글게 만들기

• 타원 형태로 둥글게 만들고 싶다면 가로 반지름 크기와 세로 반지름 크기를 함께 지정하면 됩니다.
• 기본형 : border-top-left-radius : < 가로 크기 > < 세로 크기 >
  border-top-right-radius : < 가로 크기 > < 세로 크기 >
  border-bottom-right-radius : < 가로 크기 > < 세로 크기 >
  border-bottom-left-radius : < 가로 크기 > < 세로 크기 >
  border-radius : < 가로 크기 > < / 세로 크기 >
• 각 모서리마다 따로 지정한다면 가로 반지름과 세로 반지름을 차례로 입력하면 되지만 네 방향을 한꺼번에 지정하기 위해 border-radius 속성을 이용할 경우 가로 반지름과 세로 반지름 사이에 슬래시(/)를 넣어 구분합니다.

 

border-top-left-radius: 100px 50px;

border-bottom-right-radius: 50% 30%

border-top-right-radius: 50px;

<style>
    div {
        width: 250px; height: 150px;
        border: 2px solid;
        margin-bottom: 30px;
    }
    .exam4 {border-top-left-radius: 100px 50px;}
    .exam5 {border-bottom-right-radius: 50% 30%;}
    .exam6 {border-top-right-radius: 50px;}
</style>      

참고 : HTML5 + CSS3 웹 표준의 정석