[HTML5, CSS3] border 활용법

기본적인 형태 말고 다른 활용법도 있어서 작성해봅니다.

 

한면만 테두리 작성하기

.box1{border-top:1px solid #000;}

박스 윗면만 테두리가 작성이됩니다.

윗면만 작성가능하듯이 left, right, bottom 으로 바꿔서 사용 가능합니다.

 

둥근 테두리 작성하기

직각 테두리가 아닌 둥근테두리 사용법은 border-radius를 사용합니다.

.box1{border:1px solid #000; border-radius:10px;}

border-radius 값이 커지면 커질수록 더 둥글해 집니다.

적용 값 입니다.