CSS #3 Border

Border

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

Border property는 요소의 경계에 스타일, 굵기 그리고 색을 설정할 수 있습니다.

 

• Border Style : Border의 스타일을 정의할 수 있습니다.

/*
dotted;
dashed;
solid;
double;
groove;
ridge;
inset;
outset;
none;
hidden;
[mix] dotted dashed solid double;
*/

 

 

• Border Width : Border(경계선)의 굵기를 정의합니다.

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

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

p.three {
  border-style: solid;
  border-width: 5px 20px; /* 5px 위 아래, 20px 양 옆 */
}

p.four {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px 위, 10px 우, 4px 아래, 35px 좌 */
}
/*시계 방향으로 이동합니다.*/

 

 

• Border Color : Border(경계선)의 색을 지정합니다.

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

p.two {
  border-style: solid;
  border-color: red green blue yellow; 
/* red top, green right, blue bottom and yellow left */
}
/*마찬가지로 시계방향으로 각 분면의 색을 지정할 수도 있습니다. */

색이름, 16진법, RGB, HSL값으로 색을 지정할 수있습니다.

 

 

• Border Sides Border에서는 위, 오른쪽, 아래, 왼쪽의 경계를 다르게 지정할 수 있습니다.

/* Four values */
p {
  border-style: dotted solid double dashed;
}
/* 위, 오른쪽, 아래, 왼쪽 순으로 값이 지정됩니다.*/

/* Three values */
p {
  border-style: dotted solid double;
}
/* 위, 양 옆, 아래 순으로 값이 지정됩니다.*/
/* Two values */
p {
  border-style: dotted solid;
}
/* 위 아래, 양 옆의 값이 지정됩니다. */
/* One value */
p {
  border-style: dotted;
}
/* 전체 값을 지정합니다.*/

 

 

• Shorthand

백그라운드와 동일하게 Border의 값들도 한번에 작성할 수 있습니다.

p {
  border-bottom: 6px solid red;
}
/* 아래의 값을 지정된 값으로 변경합니다.*/

 

 

• Roundes Borders Border-radius는 경계의 끝을 둥글게 설정할 수 있습니다.

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

 

참고: 

https://www.w3schools.com/css/css_border.asp

CSS Borders