CSS Border

wCSS Border Style

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

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;}

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A hidden border.

A mixed border.

 

 

CSS Border Width

border-width속성은 네 테두리의 너비를 지정합니다.

너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나 세 가지 미리 정의 된 값 중 하나를 사용하여 설정할 수 있습니다 : thin, medium 또는 thick :

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

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

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

 

 

Specific Side Widths

border-width 속성은 1-4 개의 값을 가질 수 있습니다 (상단 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리).

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left
}

 

 

CSS Border Color

border-color속성은 네 테두리의 색상을 설정하는 데 사용

색상은 다음과 같이 설정할 수 있습니다.

• name- "red"와 같은 색상 이름을 지정하십시오
• HEX- "# ff0000"과 같은 HEX 값을 지정하십시오.
• RGB- "rgb (255,0,0)"와 같은 RGB 값을 지정하십시오.
• HSL- "hsl (0, 100 %, 50 %)"와 같은 HSL 값을 지정하십시오.
• transparent

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

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

p.three {
  border-style: dotted;
  border-color: blue;
}

 

RGBA Values

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0, 0.5); /* red */
}

 

 

CSS Shorthand Border Property

p {
  border: 5px solid red;
}

p {
  border-bottom: 5px solid red;
}