index.html

--- layout: single property_name: border-top ---<section id="border-top" class="property property--shorthand"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/border-top/" data-property-name="border-top" 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="border-top">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-top" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#border-top"><span>#</span>border-top</a></h2><div class="property-description"><p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/#border-top-width" data-property-name="border-top-width">border-top-width</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/#border-top-style" data-property-name="border-top-style">border-top-style</a></code> and <code class="shorthand"><a class="hash" href="{{site.url}}/#border-top-color" data-property-name="border-top-color">border-top-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="border-top: 4px dotted red;">border-top: 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 border-top" id="border-top-4px-dotted-red">Hello world</div></div></aside><style type="text/css">#border-top-4px-dotted-red{ border-top: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="border-top: 2px solid;">border-top: 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 border-top" id="border-top-2px-solid">Hello world</div></div></aside><style type="text/css">#border-top-2px-solid{ border-top:2px solid;}</style></section></section>