[ 코딩 ] css border-radius 테두리 둥굴게

 

[ 코딩 ] css border-radius 테두리 둥글게 곡선 처리하기

 

css border-radius 속성

 

 

border-radius는

이미지를 동그란 원으로 만들어 줄 때

테두리의 모서리를 곡선으로 만들어주고 싶을 때 사용한다.

 

 

 

원형으로 만들고 싶을때

 

 

 

border-radius : 50%; 

 

 

네 모서리가 동일하기 때문에 50%로 값을 한번만 적어주면 원형이 만들어 진다.

이미지에도 border-radius 값을 주면 모서리가 둥글게 변한다.

 

 

 

border-radius 전체 적는 순서

 

 

 

border-radius : 1 2 3 4; 

 

 

전체 다른 값을 입력하고 싶다면

왼쪽위를 맨 처음으로 적어주고 왼쪽아래를 맨 마지막에 적어주면 된다. 

 

 

위 이미지만 기억하면 암기하기 쉽다. 

왼쪽위가 시작점이고 시계방향으로 적어주면 된다는 걸 기억하자.

 

 

 

연습 : 위쪽 모서리만 둥글게 만들어보자

 

 

위 이미지처럼 위쪽 모서리만 둥글게 만들고 싶다면?

 

border-radius : 1 2 3 4; 

위 숫자 중에서 1 2에만 40px을 넣어주고 

3 4는 변경된게 없기 때문에 숫자 0을 넣어주면 된다. 

 

 

답 : border-radius : 40px 40px 0 0 ;

 

 

만약 아래쪽만 둥글게 바꾸고 싶다면 

border-radius : 0 0 40px 40px;

 

 

 

모서리 하나씩 값을 주는 방법은 ?  

 

 

 

 

border-top-left-radius : 20px(값); > 왼쪽위

border-top-right-radius : 20px(값); > 오른쪽위

border-bottom-right-radius : 20%(값); > 오른쪽아래

border-bottom-left-radius : 20%(값); > 왼쪽아래

 

 

20px 과 20% 는 내가 임의로 준 값이라 무시하면 된다.

 

 

 

이상 border-radius에 대한 포스팅을 마친다.