CSS text-decoration-skip-ink Property


The text-decoration-skip-ink CSS property is used to control how underlines and overlines on text should interact with descenders and ascenders of letters. It helps improve the visual appearance of text with decorative lines by preventing these lines from overlapping or cutting through the parts of letters that extend below the baseline or above the x-height. By using values like auto, none, or ink, web designers can fine-tune how text decorations are positioned, ensuring better legibility and aesthetics in typography on web pages. This property enhances the overall readability and user experience when styling text with decorative underlines or overlines.

Initial value
Applies to
all elements
Computed value
as specified
JavaScript syntax

Interactive Demo

The rusty swing set creaked.


text-decoration-skip-ink: auto | none | all


  • autoUnderlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.
  • noneThe default — the browser may interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.
  • allThe browser must interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the auto behavior might not create interruptions.


<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
この文は、 text-decoration-skip-ink: all の使用例を示しています。
p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */

.no-skip-ink {
  text-decoration-skip-ink: none;

.skip-ink-all {
  text-decoration-skip-ink: all;

Browser Support

The following table will show you the current browser support for the CSS text-decoration-skip-ink property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024