---
title: mask-border-width
slug: Web/CSS/mask-border-width
translation_of: Web/CSS/mask-border-width
---
<div>{{CSSRef}}</div>

<p>The <strong><code>mask-border-width</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> properti mengatur lebar elemen <a href="/en-US/docs/Web/CSS/mask-border">mask border</a>.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css no-line-numbers notranslate">/* Keyword value */
mask-border-width: auto;

/* &lt;length&gt; value */
mask-border-width: 1rem;

/* &lt;percentage&gt; value */
mask-border-width: 25%;

/* &lt;number&gt; value */
mask-border-width: 3;

/* vertical | horizontal */
mask-border-width: 2em 3em;

/* top | horizontal | bottom */
mask-border-width: 5% 15% 10%;

/* top | right | bottom | left */
mask-border-width: 5% 2em 10% auto;

/* Global values */
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: unset;
</pre>

<p>The <code>mask-border-width</code> properti dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai yang dipilih dari daftar nilai di bawah.</p>

<ul>
 <li>Ketika <strong>satu</strong> nilai ditentukan, ini menerapkan lebar yang sama ke <strong>keempat sisinya.</strong></li>
 <li>Ketika <strong>dua</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas dan bawah</strong>, yang kedua setelah <strong>kiri dan kanan.</strong></li>
 <li>Ketika <strong>tiga</strong> nilai ditentukan, lebar pertama diterapkan ke <strong>atas</strong>, yang kedua setelah <strong>kiri dan kanan</strong>, yang kedua setelah <strong>bawah</strong>.</li>
 <li>Ketika <strong>empat</strong> nilai ditentukan, lebar berlaku untuk <strong>atas</strong>, <strong>kanan</strong>, <strong>bawah</strong>, dan <strong>kiri</strong> dalam urutan itu (searah jarum jam).</li>
</ul>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>&lt;length-percentage&gt;</code></dt>
 <dd>Lebar batas topeng, ditetapkan sebagai {{cssxref ("&lt;length&gt;")}} atau {{cssxref ("&lt;percentage&gt;")}}. Persentase relatif terhadap lebar area perbatasan untuk offset horizontal dan tinggi area perbatasan untuk offset vertikal. Tidak boleh negatif.</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>Lebar batas topeng, ditentukan sebagai kelipatan yang sesuai {{cssxref("border-width")}}. Tidak boleh negatif.</dd>
 <dt><code>auto</code></dt>
 <dd>Lebar batas topeng dibuat sama dengan lebar atau tinggi intrinsik (mana yang dapat diterapkan) yang sesuai {{cssxref("mask-border-slice")}}. Jika gambar tidak memiliki dimensi intrinsik yang diperlukan, sesuai <code>border-width</code> digunakan sebagai gantinya.</dd>
</dl>

<h2 id="Formal_definition">Formal definition</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax">Formal syntax</h2>

{{csssyntax}}

<h2 id="Examples">Examples</h2>

<h3 id="Basic_usage">Basic usage</h3>

<p>Properti ini tampaknya belum didukung di mana pun. Ketika akhirnya mulai didukung, itu akan berfungsi untuk menentukan lebar topeng perbatasan - mengatur ini ke nilai yang berbeda menjadi <code><a href="/en-US/docs/Web/CSS/mask-border-slice">mask-border-slice</a></code> akan menyebabkan irisan diskalakan agar sesuai dengan topeng perbatasan.</p>

<pre class="brush: css notranslate">mask-border-width: 30 fill;</pre>

<p>Browser berbasis Chromium mendukung versi lama properti ini — <code>mask-box-image-width</code> — dengan awalan:</p>

<pre class="brush: css notranslate">-webkit-mask-box-image-width: 20px;</pre>

<div class="blockIndicator note">
<p><strong>Note</strong>: The <code><a href="/en-US/docs/Web/CSS/mask-border">mask-border</a></code> Halaman menampilkan contoh yang berfungsi (menggunakan properti topeng perbatasan awalan kedaluwarsa yang didukung di Chromium), sehingga Anda bisa mendapatkan gambaran tentang efeknya.</p>
</div>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td>
   <td>{{Spec2("CSS Masks")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>TBD</p>