CSS border-width 테두리 너비

CSS border-width 속성(테두리 너비)

네 테두리의 폭을 지정한다.

너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나 미리 정의 된 값 (thin, medium, thick )으로 설정 

 

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

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

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

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

p.five {
  border-style: double;
  border-width: 15px;
  border-color: lightblue;
}

p.six {
  border-style: double;
  border-width: thick;
  border-color: gray;
}

 

 

 

CSS border-width/color 개별 지정 

p{
  border-style: solid;
  border-width: 25px 30px 20px 55px;
  border-color: #675bff #4caf50 #8fcbdd #ffeb00;
}

 

텍스트를 빼면 이런 모양이 가능하기에 

이를 활용하여 css 만으로 화살 표 모양 만들기 가능하다.