DevOps:leehi9817

css 라운드 설정 - round 본문

프론트 엔드/css

css 라운드 설정 - round

leehi9817 2021. 11. 3. 18:28

round 지정 방법

div는 기본적으로 사각형 모양을 가지고 있는데, 사각형의 모서리를 둥글게 처리하고 싶을 때 사용하는 속성이 round 입니다.

라운드를 주는 방법에는 네군데를 한번에 주는 방법과 따로 주는 방법이 있습니다.

속성값을 크게 줄 수록 더 둥근 모양에 가까워집니다.

네군데를 한번에 라운드 주는 방법

div {
	border-radius: 10px;
    }

네군데를 각각 따로 라운드 주는 방법

div {
    /* 왼쪽 위 모서리 */
    border-top-left-radius: 10px;
    /* 오른쪽 위 모서리 */
    border-top-right-radius: 10px;
    /* 왼쪽 아래 모서리 */
    border-bottom-left-radius: 10px;
    /* 오른쪽 아래 모서리 */
    border-bottom-right-radius: 10px;
    }
Comments