[HTML&CSS] CSS - border-radius 활용한 도형만들기

[CSS] border-radius : block의 각 모서리를 구부릴 수 있음. 

        -> 각 모서리를 기점으로 해당 px만큼 떨어져서 구부리는 원리

 

- 형식 1) border-radius : : 50px 25px 25px 30px;  // 좌상 우상 우하 좌하 순으로

- 형식 2) border-radius : 30px;  // 네 모서리가 모두 동일하게 (cf. margin)

 

- 활용 : border-radius : 50% 인 상황에서 직사각형이면 타원, 정사각형이면 완전한 원을 생성할 수 있음.

        + 뿐만 아니라 % 나 px을 조절하여 도형을 만들 수 있음.

 

활용예시 1) 

See the Pen border radius 기초 by hoyeol0513 (@hoyeol0513) on CodePen.

활용 예시 2) hover 활용

See the Pen border-radius 활용 by hoyeol0513 (@hoyeol0513) on CodePen.