지토의 개발일기/html + CSS

[HTML + CSS] 테두리 속성

지아토 2021. 10. 1. 11:08

1. border-width 속성 , border-style 속성

 

border-width 속성의 경우 테두리의 너비를 지정하는 스타일 속성이다.

 

border-style 속성은 테두리의 형태를 지정하는 속성이다.

 

테두리를 넣을 때 둘다 사용하는 것이 좋다.

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

위의 예시는 .box에 대한 테두리 속성을 직접 다 입력했지만 이를 한번에 작성 가능합니다. 

 

<style>
	.box {
    	border: thick dashed black;
    }
	
</style>

 

또한 border 속성은 margin 속성, 그리고 padding 속성처럼 left, top , right, bottom 각각 의 값을 적용할 수 있다.

 

 

2. border-radius 속성.

 

border-radius 속성을 통해 테두리의 모양을 변경할 수 있습니다.

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.