[CSS] border 테두리 속성

border 태두리

 

border-radius 둥근 테두리 지정

border-radius: _px; 네 모서리의 반지름이 _px

border-radius: _px__px__px__px; 각각 반지름 지정

border-radius: _px__px__px; 좌측부터 시계방향 지정

border-radius: _px__px; 대각선 지정 (좌상단-우하단,우하단-좌상단)

border-top-right-radius: _px;  우상단 반지름 지정

 

border-style 테두리 선 모양

dotted : 모서리를 점선으로 지정

 

border-width  테두리 두께

border-width(border-??-width)

 

border-color 테두리 색상

border-color(border-??-color) 

 

 

예시

 

<style>
.box{
    width: 200px;
    height: 200px;
    border: 2px solid blue;
    /* 가로세로가 200px, 테두리가 실선/두께2/색상 파랑 박스 */
}
.box2{
    width: 300px;
    height: 300px;
    border: 1px dotted red;
    border-radius: 10px 0px 10px 30px;
    background-color: pink;
    border-width: 20px;
    /* 가로세로300px, 테두리 점선/1px/색상 빨강 박스
    	테두리 둥글게 위10,오0,아래10,왼30
        추후 테두리 굵기 20px변경 */
}
</style>
<div class="box"></div>
<div class="box2"></div>