HTML hr 태그 두께 지정

1 개요

HTML hr 태그 두께 지정

• 기본 hr 스타일에는 border가 적용되어 있어 border: 0;를 해줘야 함
• height 속성으로 두께 지정
• background 또는 background-color 속성으로 색상 지정

html

Copy

<style>
  .my-hr1 {
    border: 0;
    height: 1px;
    background: #ccc;
  }
  .my-hr2 {
    border: 0;
    height: 2px;
    background: #ccc;
  }
  .my-hr3 {
    border: 0;
    height: 3px;
    background: #ccc;
  }
</style>

두께 1px
<hr class="my-hr1">
두께 2px
<hr class="my-hr2">
두께 3px
<hr class="my-hr3">

2 같이 보기

• HTML hr 태그
• HTML hr 태그 브런치 스타일

3 참고

• https://css-tricks.com/examples/hrs/