[HTML/CSS] border-radius를 통한 라운딩 처리

 

생각보다 border는 많이 사용되는데 사용방법에 따라 다양한 표현처리를 할 수 있다.

보통은 버튼이나 input 등에 사용되는 편이며, 여러 가지 형태로 테두리 모양을 변형할 때도 사용되며 유용하게 쓰인다.

 

border-radius는 전체 라운딩을 처리할 때 모서리의 값을 줄 수 있으며,

값이 다를 경우 시계방향 순서대로 값을 주면 된다.

이렇게 위의 그림처럼 각 모서리에 해당되는 곳만 라운딩을 주고싶다면 해당하는 부분에 값을 주면된다.

.box {
    border-top-left-radius: 25px;
    border-bottom-left-radius : 25px;
    border-top-right-radius : 25px;
    border-bottom-right-radius : 25px;
}

위의 이미지처럼 크로스로 radius를 주려면 각 모서리 위치에 해당하는 코드로 값을 지정해줘야한다.

.box {border-top-left-radius: 25px; border-bottom-right-radius: 25px;}

 

또한, 버튼모양을 완전히 둥근 형태로 만들고 싶다면, width값과 height값을 동일한 값으로 준 뒤

border-radius: 50%;를 적용하면 원이 만들어진다.