본문 바로가기
Reference/CSS

border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.

by @webstoryboy 2022. 12. 30.

border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.

Reference/CSS

border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.

by @webs 2022. 12. 29.

border-style

border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.

테두리 종류를 여러가지 스타일로 설정 가능합니다. 네 면의 위치를 일괄적으로 설정할 수 있으며, 각각의 위치를 개별적으로도 설정이 가능합니다. 스타일을 설정하기 위해서는 border-width와 border-color가 설정되어 있어야 합니다.


특징 설명
기본값 border-style : none
적용 border
버전 CSS1
사용성 ★★☆☆☆

정의(Definition)

  • border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.

비교(Compare)

  • border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
  • border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.
  • border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.
  • border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.
  • border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.

관련된 속성(Related Properties)

  • border 속성은 테두리 속성을 일괄적으로 설정합니다.
  • border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
  • border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
  • border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
  • border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
  • border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.

문법(Syntax)

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

/* 기본 속성 */ 
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-style: dotted solid; 

/* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-style: dotted solid ridge; 

/* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
border-style: dotted solid ridge dashed; 

/* 전역 속성 */
border-style: inherit;   /* 상속 */
border-style: initial;   /* 초기화 */
border-style: unset;     /* 설정 해제 */

속성(Property)

속성값 값(예) 설명
none border-style: none 테두리 스타일을 설정하지 않습니다.
hidden border-style: hidden 테두리 스타일을 숨김으로 설정합니다.
dotted border-style: dotted 테두리 스타일을 dotted(점선)으로 설정합니다.
dashed border-style: dashed 테두리 스타일을 dashed(긴 점선)으로 설정합니다.
solid border-style: solid 테두리 스타일을 solid(실선)으로 설정합니다.
double border-style: double 테두리 스타일을 double(이중선)으로 설정합니다.
groove border-style: groove 테두리 스타일을 groove(움푹 들어간 입체적인 선)로 설정합니다.
ridge border-style: ridge 테두리 스타일을 ridge(앞으로 튀어나온 입체적인 선)로 설정합니다.
inset border-style: inset 테두리 스타일을 inset(박스 전체가 움푹 들어간 입체적인 선)로 설정합니다.
outset border-style: outset 테두리 스타일을 outset(박스 전체가 앞으로 튀어나온 입체적인 선)로 설정합니다.

예제1(Sample)

테두리 스타일을 설정한 예제입니다.

border: 4px solid #4390e1
border: 10px solid #4390e1
border: 15px solid #4390e1
HTML
CSS
SCRIPT
<div class="border-box">
    <div class="box"><span>border: 4px solid #4390e1</span></div>
    <div class="box"><span>border: 10px solid #4390e1</span></div>
    <div class="box"><span>border: 15px solid #4390e1</span></div>
</div>
.border-box {
    display: flex;
    justify-content: space-between;
}
.border-box .box {
    width: 32%;
    background-color: #a2cbfa;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    box-sizing: border-box;
}
.border-box .box:nth-child(1){
    border: 5px solid #4390e1
}
.border-box .box:nth-child(2){
    border: 10px solid #4390e1
}
.border-box .box:nth-child(3){
    border: 15px solid #4390e1
}

@media (max-width: 800px){
    .border-box {
        flex-direction: column;
    }
    .border-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}
//javascript none

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
border-style

보더와 관련된 속성

  • border 속성은 테두리 속성을 일괄적으로 설정합니다.
  • border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
  • border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
  • border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
  • border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.
  • border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.
  • border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.
  • border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다.
  • border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
  • border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.
  • border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.
  • border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다.
  • border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.
  • border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
  • border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.
  • border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.
  • border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
  • border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.
  • border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.
  • border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.
  • border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
  • border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.
  • border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.
  • border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.
  • border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.
  • border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.
  • border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
  • border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
  • border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
  • border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
  • border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.

참고(Reference)


댓글