Reference/CSS

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

by @webs 2022. 12. 29.

border

테두리에는 두께(width), 스타일(style), 컬러(color) 속성을 일괄적으로 설정할 수 있습니다. 테두리는 네 면에 일괄적으로 설정도 가능하지만, 개별적으로 위쪽(border-top), 오른쪽(border-right), 아래쪽(border-bottom), 왼쪽(border-left)으로도 가능합니다. 개별적으로 줄 때도 두께(width), 스타일(style), 컬러(color)를 설정할 수 있습니다.

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

정의(Definition)

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

비교(Compare)

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

문법(Syntax)

border : color | style | width

/* 컬러 속성 */ 
border: currentcolor;              /* 기본값 */
border: #ff0000;                   /* 헥사코드 */
border: blue;                      /* 키워드 색상 */
border: rgb(255, 255, 255);        /* RGB 색상 */
border: rgba(255, 255, 255, 1);    /* RGBA 색상 */
border: hsl(120, 100%, 50%);       /* HSL 색상 */
border: hsla(120, 100%, 50%,1);    /* HSLA 색상 */
border: transparent;               /* 투명 */

/* 스타일 속성 */ 
border: none;
border: hidden;
border: dotted;
border: dashed;
border: solid;
border: double;
border: groove;
border: ridge;
border: inset;
border: outset;

/* 두께 속성 */ 
border: 10px;
border: thin;
border: medium;
border: thick;

/* 두께 | 스타일  */
border: 1px solid;
border: medium ridge;

/* 두께 | 스타일 | 색상  */
border: 1px solid #000;
border: medium dashed blue;

/* 전역 속성 */
border: inherit;   /* 상속 */
border: initial;   /* 초기화 */
border: revert;    /* 원래대로 돌리기 */
border: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
width	border: 2px	테두리 굵기를 설정합니다.
style	border: solid	테두리 스타일을 설정합니다.
color	border: #000	테두리 컬러를 설정합니다.

예제1(Sample)

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

border: 5px solid #4390e1

border: 10px solid #4390e1

border: 15px solid #4390e1

border: 5px solid #ff0; border: 10px dotted #6943e1; border: 15px dashed #25992c; border: medium double red; border: 25px groove #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%;
    }
}