테두리 관련 CSS - border-style

테두리 관련 CSS - border-style 속성

• border-style 속성은 기본 값이 none이기 때문에 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다. 따라서 테두리를 그리기 위해서는 맨 먼저 테두리 스타일을 지정해야 합니다.
• 기본형 : border-style : none / hidden / dashed / dotted / double / groove / inset / outset / ridge / solid
• border-style 속성은 실선이나 점선, 이중선 등 테두리의 스타일을 지정합니다.

속성 값	설명
none	테두리가 나타나지 않습니다. (기본 값)
hidden	테두리가 나타나지 않습니다. border-collapse : collapse일 경우, 다른 테두리도 표시되지 않습니다.
dashed	테두리를 짧은 선(직선으로 된 점선)으로 표시합니다.
dotted	테두리를 점선(작은 원)으로 표시합니다.
double	테두리를 이중선(겹선)으로 표시합니다. 두 선 사이의 간격은 border-width 값으로 지정합니다.
groove	테두리를 창에 조각한 것처럼 표시합니다. 홈이 파인 듯 입체적으로 보입니다.
inset	border-collapse : separate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고 border-collapse : collapse일 경우 groove와 똑같이 표시됩니다.
outset	border-collapse : separate일 경우 전체 박스 테두리가 창에서 튀어나오 것처럼 표시되고 border-collapse : collapse일 경우 ridge와 똑같이 표시됩니다.
ridge	테두리를 창에서 튀어나온 것처럼 표시합니다.
solid	테두리를 실선으로 표시합니다.

 

border-style : solid / dotted / dashed / double / groove

 

<style>
    div {
        width: 150px; height: 100px;
        display: inline-block;
        margin: 15px;
        border-width: 5px; /*테두리 굵기*/
        border-color: brown
    }
    .exam1 {border-style: solid;}
    .exam2 {border-style: dotted;}
    .exam3 {border-style: dashed;}
    .exam4 {border-style: double;}
    .exam5 {border-style: groove;}
</style>