---
title: outline-width
slug: Web/CSS/outline-width
tags:
  - CSS
  - CSS Outline
  - CSS Property
  - Layout
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/outline-width
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline-width</code></strong> 속성은 요소 외곽선의 두께를 설정합니다.</span> 외곽선은 요소의 <a href="/ko/docs/Web/CSS/border">테두리</a> 바깥에 그려지는 선입니다.</p>

<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>



<p>외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.</p>

<h2 id="구문">구문</h2>

<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* &lt;length&gt; 값 */
outline-width: 1px;
outline-width: 0.1em;

/* 전역 값 */
outline-width: inherit;
</pre>

<p><code>outline-width</code> 속성은 다음 값 중 하나를 사용해 지정합니다.</p>

<h3 id="값">값</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>외곽선의 두께를 <code>&lt;length&gt;</code>로 설정합니다.</dd>
 <dt><code>thin</code></dt>
 <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>1px</code>입니다.</dd>
 <dt><code>medium</code></dt>
 <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>3px</code>입니다.</dd>
 <dt><code>thick</code></dt>
 <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>5px</code>입니다.</dd>
</dl>

<h2 id="형식_정의">형식 정의</h2>

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

<h2 id="형식_구문">형식 구문</h2>

{{csssyntax}}

<h2 id="예제">예제</h2>

<h3 id="요소의_외곽선_두께_설정하기">요소의 외곽선 두께 설정하기</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;span id="thin"&gt;thin&lt;/span&gt;
&lt;span id="medium"&gt;medium&lt;/span&gt;
&lt;span id="thick"&gt;thick&lt;/span&gt;
&lt;span id="twopixels"&gt;2px&lt;/span&gt;
&lt;span id="oneex"&gt;1ex&lt;/span&gt;
&lt;span id="em"&gt;1.2em&lt;/span&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample('요소의_외곽선_두께_설정하기', '100%', '80')}}</p>

<h2 id="명세">명세</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('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.properties.outline-width")}}</p>