정의 및 사용 방법

text-decoration-style 속성은
텍스트에 text-decoration-line으로 지정된 선 장식으로 그려진 선의 스타일을 설정합니다.

이 속성은 solid, dashed, dotted, double, wavy 등의 스타일을 지원합니다

기본 예제

CSS 라이브 데모: text-decoration-style 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    text-decoration-style: solid | double | dotted | dashed | wavy
}

값

text-decoration-style 속성은 요소에 지정된 텍스트 장식 선의 스타일을 지정합니다. 아래 값들은 이러한 스타일이 어떻게 그려지는지를 의미합니다.

text-decoration-style 속성 값
solid 일반적인 실선 스타일입니다.
double 이중선 스타일입니다.
dotted 점선 스타일입니다.
dashed 대쉬선 스타일입니다.
wavy 파동 모양의 선 스타일입니다.

구문

CSS 
/* 키워드 값 */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* 글로벌 값 */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;

형식 정의

text-decoration-style 속성의 형식 정의
초깃값 solid
적용 요소 모든 요소
상속 아니오
애니메이션 아니오

활용 예제

HTML 
<p>텍스트 데코레이션 스타일 값이 wavy입니다.</p>
CSS 
p {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
}
CSS text-decoration-color 속성
실제 적용 모습

브라우저 호환성

text-decoration-style 속성에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-decoration-style 57 79 36 12.1

명세서

text-decoration-style 속성에 대한 명세서 사양
명세서 사양
text-decoration-style CSS Text Decoration Module Level 4
#text-decoration-style-property

참고문헌

같이 보기