CSS 테두리(Border)

« Previous Next Chapter »

CSS Border Properties

CSS border 속성은 요소의 테두리의 style과 width, 그리고 color을 지정할 수 있습니다.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue left border.

Border Style

border-style 속성이 표시할 테두리의 종류를 지정합니다.

	Note: border-style 성질이 설정되지 않는 한, border 속성 중에 어떤 것도 효과가 없습니다!

border-style values:

Example

Demonstration of the different border styles:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Try it yourself »

Border Width

border-width 속성은 테두리의 너비를 설정하는 데 사용됩니다.

폭은 pixels 단위로 또는 세 개의 사전 정의 된 값(thin, medium, or thick)들 중 하나를 사용하여 설정:

Note: The "border-width" 속성이 단독으로 사용되는 경우 작동하지 않습니다. "border-style" 속성을 먼저 설정합니다.

Example

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Try it yourself »

Border Color

border-color 속성은 테두리의 색상을 설정하는 데 사용됩니다. color 는 다음과 같이 설정될 수 있다.:

name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
HSL - specify a HSL value, like "hsl(0,100%,50%)"
transparent

Note : border-color 가 설정되어 있지 않으면, 해당 요소의 색상을 상속합니다. border-color 속성이 단독으로 사용되는 경우 작동하지 않습니다. border-style 속성을 먼저 설정합니다.

Example

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

Try it yourself »

Border - 각각의 면

CSS 에서는 서로 다른 면에 대해 서로 다른 테두리를 지정할 수 있습니다 :

Example

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

Try it yourself »

위의 예는 하나의 속성으로 설정할 수도 있습니다 ::

Example

p {
border-style: dotted solid;
}

Try it yourself »

border-style 속성은 1개 ~ 4개의 값을 가질 수 있습니다..

border-style:dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
border-style:dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
border-style:dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
border-style:dotted;
- all four borders are dotted

위의 예에서는 border-style 속성에 사용되었다. 하지만, border-width 와 border-color 속성에도 사용할 수 있다.

Border - 단축형 속성

위의 예에서 볼 수 있듯이, 경계를 처리할 때 고려해야 할 여러 속성이 있습니다

코드를 단축하기 위해, 하나의 속성에 모든 개별 경계 속성을 지정하는 것도 가능하다. 이는 단축형 속성이라고합니다.

border 속성은 다음과 같은 개별 경계 속성에 대한 단축형 입니다 :

border-width
border-style(required)
border-color

Example

p {
border: 5px solid red;
}

Try it yourself »

CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example

p {
border: 2px solid red;
border-radius: 5px;
}

Try it Yourself »

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

All CSS Border Properties

Property	Description
border	Sets all the border properties in one declaration
border-bottom	Sets all the bottom border properties in one declaration
border-bottom-color	Sets the color of the bottom border
border-bottom-style	Sets the style of the bottom border
border-bottom-width	Sets the width of the bottom border
border-color	Sets the color of the four borders
border-left	Sets all the left border properties in one declaration
border-left-color	Sets the color of the left border
border-left-style	Sets the style of the left border
border-left-width	Sets the width of the left border
border-right	Sets all the right border properties in one declaration
border-right-color	Sets the color of the right border
border-right-style	Sets the style of the right border
border-right-width	Sets the width of the right border
border-style	Sets the style of the four borders
border-top	Sets all the top border properties in one declaration
border-top-color	Sets the color of the top border
border-top-style	Sets the style of the top border
border-top-width	Sets the width of the top border
border-width	Sets the width of the four borders

« Previous Next Chapter »