CSS Borders

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element's border.

 

 

CSS 테두리 속성

 

css 테두리 속성은 너가 요소의 테두리의 색깔, 두께, 모양을 명시하기 위해 사용할수 있다.

 

CSS Border Style

The border-style property specifies what kind of border to display.

 

테두리 모양

border-style 속성은 보여주고자 하는 테두리의 종류를 명시한다.

 

 

CSS Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

 

테두리의 넓이

border-width 속성은 4가지 테두리의 넓이를 명시한다.

넓이는 구체적인 크기로 설정할수 있고, (예를들면 px, pt, cm, em 그밖에 등등)

thin, medium, thick 등의 미리 정의된 3가지 중 하나를 사용해서 설정할 수도 있다.

 

테두리 넓이 속성은 하나에서 4가지 까지의 값을 가질수 있다. (위, 오른쪽, 아래, 왼쪽 의 테두리)

 

 

CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

• name - specify a color name, like "red"
• Hex - specify a hex value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). 

If border-color is not set, it inherits the color of the element.

 

테두리의 색깔

 

border-color 속성은 4가지 테두리의 색을 설정하기 위해 사용되어진다.

색깔은 다음과 같이 설정되어질수 있다.

 

border-color 속성은 하나부터 4가지의 값을 가질수 있다.(위 오른쪽, 아래, 왼쪽의 테두리)

만일 테두리 색을 설정하지 않았다면, 테두리의 색은 상속받는다.

 

 

CSS Border - Individual Sides

From the examples above you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

 

 

위의 예제로 부터 너는 각각의 테두리의 사이드가 다른 모양으로 명시된다는 것을 보았을 것이다.

 

테두리의 각각의 사이드를 명시하기 위한 속성이 존재한다.

 

 

CSS Border - Shorthand Property

As you can see from the examples above, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

 

짧게 쓰는 속성

 

위의 예제에서 너는 테두리를 다루기 위해 많은 속성을 고려해야한다는 것을 볼수 있을 것이다.

코드를 짧게 하기 위해서 하나의 속성안에 각각의 테두리의 모든 속성은 명시하는 것이 가능하다.

border 속성은 각각의 테두리의 속성을 짧게 만든 속성이다.

 

CSS Rounded Borders

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

 

border-radius 속성은 요소의 테두리의 둥근 부분을 추가하기 위해 사용되어진다.