index.html

--- layout: single property_name: outline ---<section id="outline" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/outline/" data-property-name="outline" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="outline">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/outline" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#outline"><span>#</span>outline</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/#outline-width" data-property-name="outline-width">outline-width</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/#outline-style" data-property-name="outline-style">outline-style</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/#outline-color" data-property-name="outline-color">outline-color</a></code>.</p></div></header><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="outline: 4px dotted red;">outline: 4px dotted red;</code></p><div class="example-description"><p>The <strong>order</strong> is important:</p><ul><li>width</li><li>style</li><li>color</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div outline" id="outline-4px-dotted-red">Hello world</div></div></aside><style type="text/css">#outline-4px-dotted-red{ outline:4px dotted red;}</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="outline: 2px solid;">outline: 2px solid;</code></p><div class="example-description"><p>Only the <em>color</em> is <strong>optional</strong>. If you omit it, the color applied will be the color of the <strong>text</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div outline" id="outline-2px-solid">Hello world</div></div></aside><style type="text/css">#outline-2px-solid{ outline:2px solid;}</style></section></section>