border-radius

목차

 

 

 

어라... border-radius를 안 했었네...?

진짜로..? 내가 제일 자주 쓰는 건데

border-radius

border-radius는 직역하면

경계선-반지름이다.

경계선에 반지름을 추가한다는 뜻으로써

 

쉽게 얘기하자면 영역 모서리에 반지름을 추가한다는 뜻이다.

즉 모서리가 동글동글해진다는 것!

 

코드

div{
  width: 200px;
  height: 200px;
  background: #ffe3fe;
}

일단 기본형인 사각형을 만들었다.

 

값 1개

이제 여기서

div{
      border-radius: 30px;

      width: 200px;
      height: 200px;
      background: #ffe3fe;
    }

이렇게 border-radius 값을 하나 지정하면,

모서리 4개가 다 해당 값으로 변환된다.

값 2개

설정값을 2개 넣으면

div{
      border-radius: 30px 80px;

      width: 200px;
      height: 200px;
      background: #ffe3fe;
    }

첫 번째 값이 왼쪽 위, 오른쪽 아래

두 번째 값이 오른쪽 위, 왼쪽 아래 설정값이 된다.

값 4개

div{
      border-radius: 30px 80px 0 100px;

      width: 200px;
      height: 200px;
      background: #ffe3fe;
    }

왼쪽 위부터 시계방향으로 돌면 된다.

 

/

div{
      border-radius: 50px / 100px;

      width: 200px;
      height: 200px;
      background: #ffe3fe;
    }

slash 왼쪽 값이 가로,

slash 오른쪽 값이 세로이다.

%

div{
      border-radius: 50%;

      width: 200px;
      height: 200px;
      background: #ffe3fe;
    }

% 는 해당 가로와 세로의 % 이다.

50%면 사각형 길이의 반을 반지름으로 잡기에, 원이 된다.

끝

bdrd라 치면 자동 완성된다.