CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Backgrounds and Borders Module Level 3</title> <meta content="CRD" name="w3c-status"> <meta content="Bikeshed version 4951e4d19, updated Mon Feb 5 17:13:30 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/css-backgrounds-3/" rel="canonical"> <meta content="647eac89bea1ae2b8f392a00bcb6678839deb136" name="revision"> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-CRD" rel="stylesheet"> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Backgrounds and Borders Module Level 3</h1> <a href="https://www.w3.org/standards/types#CRD">W3C Candidate Recommendation Draft</a>, <time class="dt-updated" datetime="2024-03-11">11 March 2024</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://www.w3.org/TR/2024/CRD-css-backgrounds-3-20240311/">https://www.w3.org/TR/2024/CRD-css-backgrounds-3-20240311/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2020/CR-css-backgrounds-3-20201222/" rel="prev">https://www.w3.org/TR/2020/CR-css-backgrounds-3-20201222/</a> <dd><a href="https://www.w3.org/TR/2017/CR-css-backgrounds-3-20171017/" rel="prev">https://www.w3.org/TR/2017/CR-css-backgrounds-3-20171017/</a> <dd><a href="https://www.w3.org/TR/2014/CR-css3-background-20140909/" rel="prev">https://www.w3.org/TR/2014/CR-css3-background-20140909/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-backgrounds-3/">https://www.w3.org/standards/history/css-backgrounds-3/</a> <dt>Implementation Report: <dd><a href="https://test.csswg.org/harness/results/css-backgrounds-3_dev/grouped/">https://test.csswg.org/harness/results/css-backgrounds-3_dev/grouped/</a> <dt>Test Suite: <dd><a href="http://test.csswg.org/suites/css3-background/nightly-unstable/">http://test.csswg.org/suites/css3-background/nightly-unstable/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3">CSSWG Issues Repository</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dd class="editor p-author h-card vcard" data-editor-id="43245"><a class="p-name fn u-email email" href="mailto:brad.kemper@gmail.com">Brad Kemper</a> (Invited Expert) <dt class="editor">Former Editor: <dd class="editor p-author h-card vcard" data-editor-id="3343"><a class="p-name fn u-email email" href="mailto:bert@w3.org">Bert Bos</a> (W3C) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-backgrounds-3/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This draft contains the features of CSS relating to borders and backgrounds. The main extensions compared to <a href="https://www.w3.org/TR/CSS2/">level 2</a> are borders consisting of images, boxes with multiple backgrounds, boxes with rounded corners and boxes with shadows. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index at https://www.w3.org/TR/.</a> This document was published by the <a href="https://www.w3.org/groups/wg/css">CSS Working Group</a> as a Candidate Recommendation Draft using the <a href="https://www.w3.org/2023/Process-20231103/#recs-and-notes">Recommendation track</a>. Publication as a Candidate Recommendation does not imply endorsement by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members. A Candidate Recommendation Draft integrates changes from the previous Candidate Recommendation that the Working Group intends to include in a subsequent Candidate Recommendation Snapshot. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-backgrounds” in the title, like this: “[css-backgrounds] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-backgrounds%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/2023/Process-20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/">W3C Patent Policy</a>. W3C maintains a <a href="https://www.w3.org/groups/wg/css/ipr" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </div> <div data-fill-with="at-risk"> The following features are at-risk, and may be dropped during the CR period: <ul> <li>animatability of <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a> <li>applicability of <a class="property css" data-link-type="property" href="#propdef-border" id="ref-for-propdef-border">border</a> and its longhands to <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box">ruby annotation containers</a> </ul> “At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first. </div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#introduction">1 Introduction</a> <ol class="toc"> <li><a href="#placement">1.1 Module Interactions</a> <li><a href="#values">1.2 Value Definitions</a> </ol> <li> <a href="#backgrounds">2 Backgrounds</a> <ol class="toc"> <li><a href="#layering">2.1 Layering Multiple Background Images</a> <li><a href="#background-color">2.2 Base Color: the background-color property</a> <li><a href="#background-image">2.3 Image Sources: the background-image property</a> <li><a href="#background-repeat">2.4 Tiling Images: the background-repeat property</a> <li><a href="#background-attachment">2.5 Affixing Images: the background-attachment property</a> <li> <a href="#background-position">2.6 Positioning Images: the background-position property</a> <ol class="toc"> <li><a href="#bg-position-serialization">2.6.1 Serialization of background-position values</a> </ol> <li><a href="#background-clip">2.7 Painting Area: the background-clip property</a> <li><a href="#background-origin">2.8 Positioning Area: the background-origin property</a> <li><a href="#background-size">2.9 Sizing Images: the background-size property</a> <li><a href="#background">2.10 Backgrounds Shorthand: the background property</a> <li> <a href="#special-backgrounds">2.11 Backgrounds of Special Elements</a> <ol class="toc"> <li><a href="#root-background">2.11.1 The Canvas Background and the Root Element</a> <li><a href="#body-background">2.11.2 The Canvas Background and the HTML <body> Element</a> <li><a href="#first-line-background">2.11.3 The ::first-line Pseudo-element‘s Background</a> </ol> </ol> <li> <a href="#borders">3 Borders</a> <ol class="toc"> <li><a href="#border-color">3.1 Line Colors: the border-color properties</a> <li><a href="#border-style">3.2 Line Patterns: the border-style properties</a> <li><a href="#border-width">3.3 Line Thickness: the border-width properties</a> <li><a href="#border-shorthands">3.4 Border Shorthand Properties</a> </ol> <li> <a href="#corners">4 Rounded Corners</a> <ol class="toc"> <li><a href="#border-radius">4.1 Curve Radii: the border-radius properties</a> <li><a href="#corner-shaping">4.2 Corner Shaping</a> <li><a href="#corner-clipping">4.3 Corner Clipping</a> <li><a href="#corner-transitions">4.4 Color and Style Transitions</a> <li><a href="#corner-overlap">4.5 Overlapping Curves</a> <li><a href="#border-radius-tables">4.6 Effect on Tables</a> </ol> <li> <a href="#border-images">5 Border Images</a> <ol class="toc"> <li><a href="#border-image-source">5.1 Image Source: the border-image-source property</a> <li><a href="#border-image-slice">5.2 Image Slicing: the border-image-slice property</a> <li><a href="#border-image-width">5.3 Drawing Areas: the border-image-width property</a> <li><a href="#border-image-outset">5.4 Edge Overhang: the border-image-outset property</a> <li><a href="#border-image-repeat">5.5 Image Tiling: the border-image-repeat property</a> <li><a href="#border-image-process">5.6 Drawing the Border Image</a> <li><a href="#border-image">5.7 Border Image Shorthand: the border-image property</a> <li><a href="#border-image-tables">5.8 Effect on Tables</a> </ol> <li> <a href="#misc">6 Miscellaneous Effects</a> <ol class="toc"> <li> <a href="#box-shadow">6.1 Drop Shadows: the box-shadow property</a> <ol class="toc"> <li><a href="#shadow-shape">6.1.1 Shadow Shape, Spread, and Knockout</a> <li><a href="#shadow-blur">6.1.2 Blurring Shadow Edges</a> <li><a href="#shadow-layers">6.1.3 Layering, Layout, and Other Details</a> </ol> </ol> <li> <a href="#levels">7 Levels</a> <ol class="toc"> <li><a href="#level-1">7.1 Level 1</a> <li><a href="#level-2">7.2 Level 2</a> <li><a href="#level-3">7.3 Level 3</a> </ol> <li> <a href="#changes">8 Changes</a> <ol class="toc"> <li><a href="#changes-2023-02">8.1 Changes since the 14 February 2023 Candidate Recommendation Snapshot</a> <li><a href="#changes-2020-12">8.2 Changes since the 22 December 2020 Candidate Recommendation Snapshot</a> <li><a href="#changes-2017-10">8.3 Changes since the 17 October 2017 Candidate Recommendation</a> <li><a href="#changes-2014-09">8.4 Changes since the 9 September 2014 Candidate Recommendation</a> <li><a href="#changes-2014-02">8.5 Changes since the 4 February 2014 Last Call Working Draft</a> <li><a href="#changes-2012-07">8.6 Changes since the 24 July 2012 Candidate Recommendation</a> <li><a href="#changes-2012-04">8.7 Changes since the 17 April 2012 Candidate Recommendation</a> <li><a href="#changes-2012LC">8.8 Changes since the 14 February 2012 “Last Call” Working Draft</a> <li><a href="#changes-2011">8.9 Changes Since the 15 February 2011 Candidate Recommendation</a> <li><a href="#changes-2009">8.10 Changes Since the 17 December 2009 Candidate Recommendation</a> </ol> <li><a href="#acknowledgments">9 Acknowledgments</a> <li><a href="#privacy">10 Privacy Considerations</a> <li><a href="#security">11 Security Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> <li><a href="#w3c-cr-exit-criteria"> CR exit criteria</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="introduction">1. Introduction<a class="self-link" href="#introduction"></a></h2> This subsection is not normative. When elements are rendered according to the <a href="https://www.w3.org/TR/css-box-3/#box-model">CSS box model</a> <a data-link-type="biblio" href="#biblio-css-box-3" title="CSS Box Model Module Level 3">[CSS-BOX-3]</a>, each element is either not displayed at all, or formatted as one or more rectangular boxes. Each box has a rectangular <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-area" id="ref-for-content-area">content area</a>, a band of <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding">padding</a> around the content, a <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border">border</a> around the padding, and a <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin" id="ref-for-margin">margin</a> outside the border. (The margin may actually be negative, but margins have no influence on the background and border.) <figure> <img alt="Diagram of a typical box, showing the content, padding, border and margin areas" height="278" src="images/box.png" width="458"> <figcaption> The various areas and edges of a typical box. (This diagram is explained in the CSS Box Model Module <a data-link-type="biblio" href="#biblio-css-box-3" title="CSS Box Model Module Level 3">[CSS-BOX-3]</a>.) </figcaption> </figure> The properties of this module deal with the decoration of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-area" id="ref-for-border-area">border area</a> and with the background of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-area" id="ref-for-content-area①">content</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding-area" id="ref-for-padding-area">padding</a>, and border areas. Additionally the box may be given a “drop-shadow” effect with the <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow①">box-shadow</a> property. If an element is broken into multiple <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragments</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a> <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> defines how the borders and background are divided over the various fragments. (An element can result in more than one fragment if it is broken at the end of a line, at the end of a column or at the end of a page; and continued in the next line, column or page.) The relative stacking order of backgrounds, borders, and shadows is given in this module. For how these layers interact with other rendered content, see Appendix E “Elaborate description of Stacking Contexts” in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <h3 class="heading settled" data-level="1.1" id="placement">1.1. Module Interactions<a class="self-link" href="#placement"></a></h3> This module replaces and extends the background and border features defined in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> sections 8.5 and 14.2. All properties in this module apply to the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-3/#first-letter0" id="ref-for-first-letter0">::first-letter</a> <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a>. The <a href="#backgrounds">background properties</a> and <a href="#corners">border-radius properties</a> also apply to the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-3/#sel-first-line" id="ref-for-sel-first-line">::first-line</a> pseudo-element. The UA may (but is not required to) apply the <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image">border-image</a> or <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow②">box-shadow</a> properties to ::first-line. The UA must not apply the <a href="#borders">border-color/style/width properties</a> to ::first-line. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <h3 class="heading settled" data-level="1.2" id="values">1.2. Value Definitions<a class="self-link" href="#values"></a></h3> This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types. For example, combining with <a href="https://www.w3.org/TR/css-images/">CSS Images</a> allows for using CSS gradients as <a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image">background-image</a> or <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image①">border-image</a> values. <a data-link-type="biblio" href="#biblio-css-images-3" title="CSS Images Module Level 3">[CSS-IMAGES-3]</a> In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly. <h2 class="heading settled" data-level="2" id="backgrounds">2. Backgrounds<a class="self-link" href="#backgrounds"></a></h2> Each box has a background layer that may be fully transparent (the default), or filled with a color and/or one or more images. The background properties specify what color (<a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color">background-color</a>) and images (<a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image①">background-image</a>) to use, and how they are sized, positioned, tiled, etc. The background properties are not inherited, but the parent box’s background will shine through by default because of the initial <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent">transparent</a> value on <a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color①">background-color</a>. <h3 class="heading settled" data-level="2.1" id="layering">2.1. Layering Multiple Background Images<a class="self-link" href="#layering"></a></h3> The background of a box can have multiple <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="layer" data-lt="background image layer" data-noexport id="background-image-layer">background image layers</dfn>. The number of layers is determined by the number of comma-separated values in the <a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image②">background-image</a> property. Note that a value of <a class="css" data-link-type="maybe" href="#valdef-background-image-none" id="ref-for-valdef-background-image-none">none</a> still creates a layer. Each of the <a data-link-type="dfn" href="#background-images" id="ref-for-background-images">background images</a> is sized, positioned, and tiled according to the corresponding value in the other background properties. The lists are matched up from the first value: excess values at the end are not used. If a property doesn’t have enough comma-separated values to match the number of layers, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent">UA</a> must calculate its <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value">used value</a> by repeating the list of values until there are enough. <div class="example" id="example-bef8b176"> <a class="self-link" href="#example-bef8b176"></a> For example, this set of declarations: <pre>background-image: url(flower.png), url(ball.png), url(grass.png); background-position: center center, 20% 80%, top left, bottom right; background-origin: border-box, content-box; background-repeat: no-repeat; </pre> has exactly the same effect as this set, with the extra position dropped and the missing values for <a class="property css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> and <a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat">background-repeat</a> filled in (emphasized for clarity): <pre>background-image: url(flower.png), url(ball.png), url(grass.png); background-position: center center, 20% 80%, top left; background-origin: border-box, content-box, border-box; background-repeat: no-repeat, no-repeat, no-repeat; </pre> </div> The first image in the list is the <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer">layer</a> closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers. Note: The <a href="#border-images">border-image properties</a> can also define a background image, which, if present, is painted on top of the background <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer②">layers</a> created by the background properties. <h3 class="heading settled" data-level="2.2" id="background-color">2.2. Base Color: the <a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color②">background-color</a> property<a class="self-link" href="#background-color"></a></h3> <table class="def propdef" data-link-for-hint="background-color"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-color">background-color</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color"><color></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>transparent <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>computed color <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value </table> This property sets the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="background-color-layer">background color</dfn> of a box. This color is drawn behind any background images. <div class="example" id="example-ed26f60a"> <a class="self-link" href="#example-ed26f60a"></a> Example: <pre>h1 { background-color: #F00 } /* Sets background to red. */</pre> </div> The <a data-link-type="dfn" href="#background-color-layer" id="ref-for-background-color-layer">background color</a> is clipped according to the <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip">background-clip</a> value associated with the bottom-most <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer③">background image layer</a>. <h3 class="heading settled" data-level="2.3" id="background-image">2.3. Image Sources: the <a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image③">background-image</a> property<a class="self-link" href="#background-image"></a></h3> <table class="def propdef" data-link-for-hint="background-image"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-image">background-image</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-bg-image" id="ref-for-typedef-bg-image"><bg-image></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>list, each item either an <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a> or the keyword <a class="css" data-link-type="maybe" href="#valdef-background-image-none" id="ref-for-valdef-background-image-none①">none</a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> This property specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="image" data-lt="background image" data-noexport id="background-images">background image(s)</dfn> of an element. Images are drawn with the first specified one on top (closest to the user) and each subsequent image behind the previous one. The property’s value is given as a comma-separated list of <a class="production css" data-link-type="type" href="#typedef-bg-image" id="ref-for-typedef-bg-image①"><bg-image></a> values where <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-bg-image"><a class="production" data-link-type="type" href="#typedef-bg-image" id="ref-for-typedef-bg-image②"><bg-image></a></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image①"><image></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> none</pre> A value of <dfn class="dfn-paneled css" data-dfn-for="background-image" data-dfn-type="value" data-export id="valdef-background-image-none">none</dfn> counts as a <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer④">background image layer</a> but draws nothing. An image that is empty (zero width or zero height), that fails to download, or that cannot be displayed (e.g., because it is not in a supported image format) likewise counts as a layer but draws nothing. See <a href="#layering">§ 2.1 Layering Multiple Background Images</a> for how <a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image④">background-image</a> interacts with other comma-separated background properties to form each <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer⑥">background image layer</a>. When setting a background image, authors should also specify a <a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color③">background-color</a> that will preserve contrast with the text for when the image is unavailable. For accessibility reasons, authors should not use background images as the sole method of conveying important information. See <a href="https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F3">Web Content Accessibility Guideline F3</a> <a data-link-type="biblio" href="#biblio-wcag20" title="Web Content Accessibility Guidelines (WCAG) 2.0">[WCAG20]</a>. Images are not accessible in non-graphical presentations, and background images specifically might be turned off in high-contrast display modes. Note: Stylistic foreground images can be provided in CSS with the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-content-3/#propdef-content" id="ref-for-propdef-content">content</a> property. Semantically-important foreground images should be provided in the document markup, e.g. with the <img> tag in HTML. Note: <a href="https://www.w3.org/TR/media-frags/#naming-space">Media fragments</a> can be used to display a portion of an image. The <a href="https://www.w3.org/TR/css-images/">CSS Images</a> module will provide fallback syntax for image formats and include additional controls for image display. <div class="example" id="example-b3c5ac2d"> <a class="self-link" href="#example-b3c5ac2d"></a> Some examples specifying background images: <pre>html { background-image: url("marble.svg") } p { background-image: none } div { background-image: url(tl.png), url(tr.png) } main { background-image: radial-gradient(at bottom right, transparent, white); } </pre> </div> Implementations may optimize by not downloading and drawing images that are not visible (e.g., because they are behind other, fully opaque images). <h3 class="heading settled" data-level="2.4" id="background-repeat">2.4. Tiling Images: the <a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat①">background-repeat</a> property<a class="self-link" href="#background-repeat"></a></h3> <table class="def propdef" data-link-for-hint="background-repeat"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-repeat">background-repeat</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-repeat-style" id="ref-for-typedef-repeat-style"><repeat-style></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma①">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>repeat <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>list, each item a pair of keywords, one per dimension <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> This property specifies how <a data-link-type="dfn" href="#background-images" id="ref-for-background-images①">background images</a> are tiled after they have been <a href="#background-size">sized</a> and <a href="#background-position">positioned</a>. The property’s value is given as a comma-separated list of <a class="production css" data-link-type="type" href="#typedef-repeat-style" id="ref-for-typedef-repeat-style①"><repeat-style></a> values where <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-repeat-style"><a class="production" data-link-type="type" href="#typedef-repeat-style" id="ref-for-typedef-repeat-style②"><repeat-style></a></dfn> = repeat-x <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> repeat-y <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> [repeat <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> space <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> round <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> no-repeat]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a></pre> Single values for <a class="production css" data-link-type="type" href="#typedef-repeat-style" id="ref-for-typedef-repeat-style③"><repeat-style></a> have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="background-repeat" data-dfn-type="value" data-export id="valdef-background-repeat-repeat-x">repeat-x</dfn> <dd> Computes to repeat no-repeat. <dt><dfn class="dfn-paneled css" data-dfn-for="background-repeat" data-dfn-type="value" data-export id="valdef-background-repeat-repeat-y">repeat-y</dfn> <dd> Computes to no-repeat repeat. <dt><a class="css" data-link-type="maybe" href="#valdef-background-repeat-repeat" id="ref-for-valdef-background-repeat-repeat">repeat</a> <dd> Computes to repeat repeat. <dt><a class="css" data-link-type="maybe" href="#valdef-background-repeat-space" id="ref-for-valdef-background-repeat-space">space</a> <dd> Computes to space space <dt><a class="css" data-link-type="maybe" href="#valdef-background-repeat-round" id="ref-for-valdef-background-repeat-round">round</a> <dd> Computes to round round <dt><a class="css" data-link-type="maybe" href="#valdef-background-repeat-no-repeat" id="ref-for-valdef-background-repeat-no-repeat">no-repeat</a> <dd> Computes to no-repeat no-repeat </dl> If a <a class="production css" data-link-type="type" href="#typedef-repeat-style" id="ref-for-typedef-repeat-style④"><repeat-style></a> value has two keywords, the first one applies to the horizontal axis, the second to the vertical one, as follows: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="background-repeat" data-dfn-type="value" data-export id="valdef-background-repeat-repeat">repeat</dfn> <dd> The <a data-link-type="dfn" href="#background-images" id="ref-for-background-images②">image</a> is repeated in this direction as often as needed to cover the <a data-link-type="dfn" href="#background-painting-area" id="ref-for-background-painting-area">background painting area</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="background-repeat" data-dfn-type="value" data-export id="valdef-background-repeat-space">space</dfn> <dd> The <a data-link-type="dfn" href="#background-images" id="ref-for-background-images③">image</a> is repeated as often as will fit within the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area">background positioning area</a> without being clipped, and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the <a data-link-type="dfn" href="#background-painting-area" id="ref-for-background-painting-area①">background painting area</a> is larger than the background positioning area, then the pattern repeats to fill the background painting area. The value of <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position">background-position</a> for this direction is ignored unless there is not enough space for two copies of the image in this axis, in which case only one image is placed, and background-position determines its position in this axis. <dt><dfn class="dfn-paneled css" data-dfn-for="background-repeat" data-dfn-type="value" data-export id="valdef-background-repeat-round">round</dfn> <dd> The <a data-link-type="dfn" href="#background-images" id="ref-for-background-images④">image</a> is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does. See the formula under <a class="property css" data-link-type="property" href="#propdef-background-size" id="ref-for-propdef-background-size">background-size</a>. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area. <dt><dfn class="dfn-paneled css" data-dfn-for="background-repeat" data-dfn-type="value" data-export id="valdef-background-repeat-no-repeat">no-repeat</dfn> <dd> The <a data-link-type="dfn" href="#background-images" id="ref-for-background-images⑤">image</a> is placed once and not repeated in this direction. </dl> Unless one of the two keywords is <a class="css" data-link-type="maybe" href="#valdef-background-repeat-no-repeat" id="ref-for-valdef-background-repeat-no-repeat①">no-repeat</a>, the whole <a data-link-type="dfn" href="#background-painting-area" id="ref-for-background-painting-area②">background painting area</a> will be tiled, i.e., not just one vertical strip and one horizontal strip. <div class="example" id="example-f2ed7ece"> <a class="self-link" href="#example-f2ed7ece"></a> <pre>body { background: white url("pendant.png"); background-repeat: repeat-y; background-position: center; } </pre> <figure> <img alt="A centered background image, with copies repeated up and down the border, padding, and content areas." height="334" src="images/bg-repeat.png" width="243"> <figcaption> The effect of <a class="css" data-link-type="maybe" href="#valdef-background-repeat-repeat-y" id="ref-for-valdef-background-repeat-repeat-y">repeat-y</a>: One copy of the background image is centered, and other copies are put above and below it to make a vertical band behind the element. </figcaption> </figure> </div> <div class="example" id="example-64e67bc4"> <a class="self-link" href="#example-64e67bc4"></a> <pre>body { background-image: url(dot.png) white; background-repeat: space } </pre> <figure> <img alt="Image of an element with a dotted background" height="365" src="images/bg-space.png" width="250"> <figcaption> The effect of <a class="css" data-link-type="maybe" href="#valdef-background-repeat-space" id="ref-for-valdef-background-repeat-space①">space</a>: the image of a dot is tiled to cover the whole background and the images are equally spaced. </figcaption> </figure> </div> See <a href="#layering">§ 2.1 Layering Multiple Background Images</a> for how <a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat②">background-repeat</a> interacts with other comma-separated background properties to form each <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer⑦">background image layer</a>. <h3 class="heading settled" data-level="2.5" id="background-attachment">2.5. Affixing Images: the <a class="property css" data-link-type="property" href="#propdef-background-attachment" id="ref-for-propdef-background-attachment">background-attachment</a> property<a class="self-link" href="#background-attachment"></a></h3> <table class="def propdef" data-link-for-hint="background-attachment"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-attachment">background-attachment</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-attachment" id="ref-for-typedef-attachment"><attachment></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma②">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>scroll <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>list, each item the keyword as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> If <a data-link-type="dfn" href="#background-images" id="ref-for-background-images⑥">background images</a> are specified, this property specifies whether they are fixed with regard to the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x1" id="ref-for-x1">viewport</a> (<a class="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed">fixed</a>) or scroll along with the box (<a class="css" data-link-type="maybe" href="#valdef-background-attachment-scroll" id="ref-for-valdef-background-attachment-scroll">scroll</a>) or its contents (<a class="css" data-link-type="maybe" href="#valdef-background-attachment-local" id="ref-for-valdef-background-attachment-local">local</a>). The property’s value is given as a comma-separated list of <a class="production css" data-link-type="type" href="#typedef-attachment" id="ref-for-typedef-attachment①"><attachment></a> keywords where <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-attachment"><a class="production" data-link-type="type" href="#typedef-attachment" id="ref-for-typedef-attachment②"><attachment></a></dfn> = scroll <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> fixed <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> local</pre> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="background-attachment" data-dfn-type="value" data-export id="valdef-background-attachment-fixed">fixed</dfn> <dd> The background is fixed with regard to the viewport. In <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#paged-media" id="ref-for-paged-media">paged media</a> where there is no viewport, a <a class="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed①">fixed</a> background is fixed with respect to the <a href="https://www.w3.org/TR/CSS2/page.html#page-box">page box</a> and therefore replicated on every page. Note: There is only one viewport per view. Even if an box is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a>, a <a class="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed②">fixed</a> background doesn’t move with the box. <dt><dfn class="dfn-paneled css" data-dfn-for="background-attachment" data-dfn-type="value" data-export id="valdef-background-attachment-local">local</dfn> <dd> The background is fixed with regard to the box’s contents: if the box has a scrolling mechanism, the background scrolls with the box’s contents, and the <a data-link-type="dfn" href="#background-painting-area" id="ref-for-background-painting-area③">background painting area</a> and <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area②">background positioning area</a> are relative to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region">scrollable overflow area</a> of the box rather than to the border framing them. Because the scrollable overflow area does not include the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-area" id="ref-for-border-area②">border area</a>, for <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scroll-container" id="ref-for-scroll-container①">scroll containers</a> the <a class="css" data-link-type="maybe" href="#valdef-background-clip-border-box" id="ref-for-valdef-background-clip-border-box">border-box</a> value of <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip①">background-clip</a> may be treated the same as <a class="css" data-link-type="maybe" href="#valdef-background-clip-padding-box" id="ref-for-valdef-background-clip-padding-box">padding-box</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="background-attachment" data-dfn-type="value" data-export id="valdef-background-attachment-scroll">scroll</dfn> <dd> The background is fixed with regard to the box itself and does not scroll with its contents. (It is effectively attached to the box’s border.) </dl> Even if the image is fixed, it is still only visible when it is in the <a data-link-type="dfn" href="#background-painting-area" id="ref-for-background-painting-area④">background painting area</a> of the box or otherwise unclipped. (See <a href="#special-backgrounds">§ 2.11 Backgrounds of Special Elements</a> for the cases when background images are not clipped.) Thus, unless the image is tiled, it may be invisible. <div class="example" id="example-e97d52e0"> <a class="self-link" href="#example-e97d52e0"></a> This example creates an infinite vertical band that remains “glued” to the viewport when the document is scrolled. <pre>body { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; } </pre> </div> Note: User agents that do not support <a class="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed③">fixed</a> backgrounds (for example due to limitations of the hardware platform) <a href="https://www.w3.org/TR/CSS/#partial">will ignore declarations</a> with the keyword fixed. For example: <pre class="example" id="example-6e8f559e"><a class="self-link" href="#example-6e8f559e"></a>body { /* For all UAs: */ background: white url(paper.png) scroll; /* For UAs that do fixed backgrounds: */ background: white url(ledger.png) fixed; } h1 { /* For all UAs: */ background: silver; /* For UAs that do fixed backgrounds: */ background: url(stripe.png) fixed, white url(ledger.png) fixed; } </pre> See <a href="#layering">§ 2.1 Layering Multiple Background Images</a> for how <a class="property css" data-link-type="property" href="#propdef-background-attachment" id="ref-for-propdef-background-attachment①">background-attachment</a> interacts with other comma-separated background properties to form each <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer⑧">background image layer</a>. <h3 class="heading settled" data-level="2.6" id="background-position">2.6. Positioning Images: the <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position②">background-position</a> property<a class="self-link" href="#background-position"></a></h3> <table class="def propdef" data-link-for-hint="background-position"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-position">background-position</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-bg-position" id="ref-for-typedef-bg-position"><bg-position></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma③">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0% 0% <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>refer to size of background positioning area minus size of background image; see text <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>list, each item a pair of offsets (horizontal and vertical) from the top left origin each given as a computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>repeatable list </table> If <a data-link-type="dfn" href="#background-images" id="ref-for-background-images⑦">background images</a> have been specified, this property specifies their initial position (after any <a href="#background-size">resizing</a>) within their corresponding <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area③">background positioning area</a>. The property’s value is given as a comma-separated list of <a class="production css" data-link-type="type" href="#typedef-bg-position" id="ref-for-typedef-bg-position①"><bg-position></a> values where <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-bg-position"><a class="production" data-link-type="type" href="#typedef-bg-position" id="ref-for-typedef-bg-position②"><bg-position></a></dfn> = [ [ left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> bottom <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> [ left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage></a> ] [ top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> bottom <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage></a> ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> [ center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> [ left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> right ] <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage④"><length-percentage></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all">&&</a> [ center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> [ top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> bottom ] <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑤"><length-percentage></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> ] ] </pre> If only one value is specified, the second value is assumed to be <a class="css" data-link-type="maybe" href="#valdef-background-position-center" id="ref-for-valdef-background-position-center">center</a>. If two values are given, a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑥"><length-percentage></a> as the first value represents the horizontal position (or offset) and a <length-percentage> as the second value represents the vertical position (or offset). The <length-percentage> values here represent an offset of the top left corner of the background image from the top left corner of the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area④">background positioning area</a>. Note: A pair of keywords can be reordered, while a combination of keyword and length or percentage cannot. So center left is valid while 50% left is not. If three or four values are given, then each <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑨"><length-percentage></a> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, <a class="css" data-link-type="propdesc" href="#propdef-background-position" id="ref-for-propdef-background-position③">background-position: bottom 10px right 20px</a> represents a 10px vertical offset up from the bottom edge and a 20px horizontal offset leftward from the right edge. If three values are given, the missing offset is assumed to be zero. Positive values represent an offset inward from the edge of the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area⑤">background positioning area</a>. Negative values represent an offset outward from the edge of the background positioning area. <div class="example" id="example-b28c564d"> <a class="self-link" href="#example-b28c564d"></a> The following declarations give the stated (horizontal, vertical) offsets from the top left corner: <pre>background-position: left 10px top 15px; /* 10px, 15px */ background-position: left top ; /* 0px, 0px */ background-position: 10px 15px; /* 10px, 15px */ background-position: left 15px; /* 0px, 15px */ background-position: 10px top ; /* 10px, 0px */ background-position: left top 15px; /* 0px, 15px */ background-position: left 10px top ; /* 10px, 0px */ </pre> </div> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="background-position" data-dfn-type="value" data-export id="valdef-background-position-percentage"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a></dfn> <dd> A percentage for the horizontal offset is relative to (<var>width of <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area⑦">background positioning area</a></var> - <var>width of <a data-link-type="dfn" href="#background-images" id="ref-for-background-images⑧">background image</a></var>). A percentage for the vertical offset is relative to (<var>height of <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area⑧">background positioning area</a></var> - <var>height of <a data-link-type="dfn" href="#background-images" id="ref-for-background-images⑨">background image</a></var>), where the size of the image is the size given by <a class="property css" data-link-type="property" href="#propdef-background-size" id="ref-for-propdef-background-size①">background-size</a>. <div class="example" id="example-c27a0cea"> <a class="self-link" href="#example-c27a0cea"></a> For example, with a value pair of 0% 0%, the upper left corner of the image is aligned with the upper left corner of, usually, the box’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding-edge" id="ref-for-padding-edge">padding edge</a>. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of the area. With a value pair of 75% 50%, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area. <figure> <img alt="Diagram of image position within element" height="269" src="images/bg-pos.png" width="397"> <figcaption> Diagram of the meaning of <a class="css" data-link-type="propdesc" href="#propdef-background-position" id="ref-for-propdef-background-position④">background-position: 75% 50%</a>. </figcaption> </figure> </div> <dt><dfn class="dfn-paneled css" data-dfn-for="background-position" data-dfn-type="value" data-export id="valdef-background-position-length"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value"><length></a></dfn> <dd> A length value gives a fixed length as the offset. For example, with a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area⑨">background positioning area</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="background-position" data-dfn-type="value" data-export id="valdef-background-position-top"><a class="css" data-link-type="maybe" href="#valdef-background-position-top" id="ref-for-valdef-background-position-top">top</a></dfn> <dd> Computes to 0% for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset. <dt><dfn class="dfn-paneled css" data-dfn-for="background-position" data-dfn-type="value" data-export id="valdef-background-position-right"><a class="css" data-link-type="maybe" href="#valdef-background-position-right" id="ref-for-valdef-background-position-right">right</a></dfn> <dd> Computes to 100% for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset. <dt><dfn class="dfn-paneled css" data-dfn-for="background-position" data-dfn-type="value" data-export id="valdef-background-position-bottom"><a class="css" data-link-type="maybe" href="#valdef-background-position-bottom" id="ref-for-valdef-background-position-bottom">bottom</a></dfn> <dd> Computes to 100% for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset. <dt><dfn class="dfn-paneled css" data-dfn-for="background-position" data-dfn-type="value" data-export id="valdef-background-position-left"><a class="css" data-link-type="maybe" href="#valdef-background-position-left" id="ref-for-valdef-background-position-left">left</a></dfn> <dd> Computes to 0% for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset. <dt><dfn class="dfn-paneled css" data-dfn-for="background-position" data-dfn-type="value" data-export id="valdef-background-position-center"><a class="css" data-link-type="maybe" href="#valdef-background-position-center" id="ref-for-valdef-background-position-center①">center</a></dfn> <dd> Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is. </dl> <div class="example" id="example-4c5187aa"> <a class="self-link" href="#example-4c5187aa"></a> The following <a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background">background</a> shorthand declarations use keywords to set <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position⑤">background-position</a> to the stated percentage values. <pre>body { background: url("banner.jpeg") right top } /* 100% 0% */ body { background: url("banner.jpeg") top center } /* 50% 0% */ body { background: url("banner.jpeg") center } /* 50% 50% */ body { background: url("banner.jpeg") bottom } /* 50% 100% */ </pre> </div> <div class="example" id="example-6c448699"> <a class="self-link" href="#example-6c448699"></a> In the example below, the (single) image is placed in the lower-right corner of the viewport. <pre>body { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } </pre> </div> <div class="example" id="example-1d05ddd8"> <a class="self-link" href="#example-1d05ddd8"></a> Background positions can also be relative to other corners than the top left. For example, the following puts the background image 10px from the bottom and 3em from the right: <pre>background-position: right 3em bottom 10px</pre> </div> See <a href="#layering">§ 2.1 Layering Multiple Background Images</a> for how <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position⑥">background-position</a> interacts with other comma-separated background properties to form each <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer⑨">background image layer</a>. <h4 class="heading settled" data-level="2.6.1" id="bg-position-serialization">2.6.1. Serialization of <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position⑦">background-position</a> values<a class="self-link" href="#bg-position-serialization"></a></h4> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value">specified value</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value">computed value</a> of the <a class="production css" data-link-type="type" href="#typedef-bg-position" id="ref-for-typedef-bg-position③"><bg-position></a> type serialize exactly as defined in <a data-link-type="biblio" href="#biblio-css-values-4" title="CSS Values and Units Module Level 4">[CSS-VALUES-4]</a> for <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#typedef-position" id="ref-for-typedef-position"><position></a>. For 3-value productions (which are not valid in <position>), the specified value serialization is identical to the equivalent 4-value syntax except that the omitted offset remains omitted. <h3 class="heading settled" data-level="2.7" id="background-clip">2.7. Painting Area: the <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip②">background-clip</a> property<a class="self-link" href="#background-clip"></a></h3> <table class="def propdef" data-link-for-hint="background-clip"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-clip">background-clip</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box"><visual-box></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma④">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>border-box <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>list, each item a keyword as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>repeatable list </table> Determines the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="background-painting-area">background painting area</dfn>, which determines the area within which the background is painted. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="background-clip" data-dfn-type="value" data-export id="valdef-background-clip-border-box">border-box</dfn> <dd> The background is painted within (clipped to) the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box">border box</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="background-clip" data-dfn-type="value" data-export id="valdef-background-clip-padding-box">padding-box</dfn> <dd> The background is painted within (clipped to) the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding-box" id="ref-for-padding-box">padding box</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="background-clip" data-dfn-type="value" data-export id="valdef-background-clip-content-box">content-box</dfn> <dd> The background is painted within (clipped to) the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-box" id="ref-for-content-box">content box</a>. </dl> Note: The root element has a different <a data-link-type="dfn" href="#background-painting-area" id="ref-for-background-painting-area⑤">background painting area</a> and thus the <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip③">background-clip</a> property has no effect when specified on it. See <a href="#special-backgrounds">§ 2.11 Backgrounds of Special Elements</a>. Note: The background is always drawn behind the border, if any. See “Elaborate description of Stacking Contexts” in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> Appendix E. See <a href="#corner-shaping">§ 4.2 Corner Shaping</a> for how <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius">border-radius</a> affects the shape of the <a data-link-type="dfn" href="#background-painting-area" id="ref-for-background-painting-area⑥">background painting area</a>. See <a href="#layering">§ 2.1 Layering Multiple Background Images</a> for how <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip④">background-clip</a> interacts with other comma-separated background properties to form each <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer①⓪">background image layer</a>. <h3 class="heading settled" data-level="2.8" id="background-origin">2.8. Positioning Area: the <a class="property css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin①">background-origin</a> property<a class="self-link" href="#background-origin"></a></h3> <table class="def propdef" data-link-for-hint="background-origin"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-origin">background-origin</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box①"><visual-box></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑤">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>padding-box <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>list, each item a keyword as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>repeatable list </table> This property determines the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="background-positioning-area">background positioning area</dfn>: the area within which any background images are positioned. For elements rendered as multiple <a data-link-type="dfn" href="https://www.w3.org/TR/css-break-4/#box-fragment" id="ref-for-box-fragment①">box fragments</a> (e.g., inline boxes on several lines, boxes on several pages), specifies which boxes <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break①">box-decoration-break</a> <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> operates on to determine the background positioning area(s). <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="background-origin" data-dfn-type="value" data-export id="valdef-background-origin-padding-box">padding-box</dfn> <dd> The position is relative to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding-box" id="ref-for-padding-box①">padding box</a>. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.) <dt><dfn class="dfn-paneled css" data-dfn-for="background-origin" data-dfn-type="value" data-export id="valdef-background-origin-border-box">border-box</dfn> <dd> The position is relative to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box①">border box</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="background-origin" data-dfn-type="value" data-export id="valdef-background-origin-content-box">content-box</dfn> <dd> The position is relative to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-box" id="ref-for-content-box①">content box</a>. </dl> If the <a class="property css" data-link-type="property" href="#propdef-background-attachment" id="ref-for-propdef-background-attachment②">background-attachment</a> value for this <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer①①">layer</a> is <a class="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed⑤">fixed</a>, then this property has no effect: in this case the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area①⓪">background positioning area</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a>. Note: If <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip⑤">background-clip</a> is <a class="css" data-link-type="maybe" href="#valdef-background-clip-padding-box" id="ref-for-valdef-background-clip-padding-box①">padding-box</a>, <a class="property css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin②">background-origin</a> is <a class="css" data-link-type="maybe" href="#valdef-background-origin-border-box" id="ref-for-valdef-background-origin-border-box">border-box</a>, <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position⑧">background-position</a> is top left (the initial value), and the element has a non-zero border, then the top and left edges of the <a data-link-type="dfn" href="#background-images" id="ref-for-background-images①⓪">background image</a> will be clipped. See <a href="#layering">§ 2.1 Layering Multiple Background Images</a> for how <a class="property css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin③">background-origin</a> interacts with other comma-separated background properties to form each <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer①②">background image layer</a>. <h3 class="heading settled" data-level="2.9" id="background-size">2.9. Sizing Images: the <a class="property css" data-link-type="property" href="#propdef-background-size" id="ref-for-propdef-background-size②">background-size</a> property<a class="self-link" href="#background-size"></a></h3> <table class="def propdef" data-link-for-hint="background-size"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background-size">background-size</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-bg-size" id="ref-for-typedef-bg-size"><bg-size></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑥">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see text <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>list, each item a pair of sizes (one per axis) each represented as either a keyword or a computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⓪"><length-percentage></a> value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>repeatable list </table> This property specifies the size of each <a data-link-type="dfn" href="#background-images" id="ref-for-background-images①①">background image</a>. The property’s value is given as a comma-separated list of <a class="production css" data-link-type="type" href="#typedef-bg-size" id="ref-for-typedef-bg-size①"><bg-size></a> values where <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-bg-size"><a class="production" data-link-type="type" href="#typedef-bg-size" id="ref-for-typedef-bg-size②"><bg-size></a></dfn> = [ <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①①"><length-percentage [0,∞]></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> auto ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,2}</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> cover <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑦">|</a> contain</pre> Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="background-size" data-dfn-type="value" data-export id="valdef-background-size-contain">contain</dfn> <dd> Scale the image, while preserving its <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-aspect-ratio" id="ref-for-natural-aspect-ratio">natural aspect ratio</a> (if any), to the largest size such that both its width and its height can fit inside the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area①①">background positioning area</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="background-size" data-dfn-type="value" data-export id="valdef-background-size-cover">cover</dfn> <dd> Scale the image, while preserving its <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-aspect-ratio" id="ref-for-natural-aspect-ratio①">natural aspect ratio</a> (if any), to the smallest size such that both its width and its height can completely cover the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area①②">background positioning area</a>. <dt>[ <dfn class="dfn-paneled css" data-dfn-for="background-size" data-dfn-type="value" data-export id="valdef-background-size-length-percentage-0"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①②"><length-percentage [0,∞]></a></dfn> | <dfn class="dfn-paneled css" data-dfn-for="background-size" data-dfn-type="value" data-export id="valdef-background-size-auto">auto</dfn> ]{1,2} <dd> The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be <a class="css" data-link-type="maybe" href="#valdef-background-size-auto" id="ref-for-valdef-background-size-auto">auto</a>. A <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage></a> is relative to the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area①③">background positioning area</a>. An <a class="css" data-link-type="maybe" href="#valdef-background-size-auto" id="ref-for-valdef-background-size-auto①">auto</a> value for one dimension is resolved by using the image’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-aspect-ratio" id="ref-for-natural-aspect-ratio②">natural aspect ratio</a> and the size of the other dimension, or failing that, using the image’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-size" id="ref-for-natural-size">natural size</a>, or failing that, treating it as 100%. If both values are <a class="css" data-link-type="maybe" href="#valdef-background-size-auto" id="ref-for-valdef-background-size-auto②">auto</a> then the <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-width" id="ref-for-natural-width">natural width</a> and/or <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-height" id="ref-for-natural-height">height</a> of the image should be used, if any, the missing dimension (if any) behaving as auto as described above. If the image has neither <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-size" id="ref-for-natural-size①">natural size</a>, its size is determined as for <a class="css" data-link-type="maybe" href="#valdef-background-size-contain" id="ref-for-valdef-background-size-contain">contain</a>. Negative values are invalid. </dl> <div class="example" id="example-bb1c7b0c"> <a class="self-link" href="#example-bb1c7b0c"></a> Here are some examples. The first example stretches the background image independently in both dimensions to completely cover the content area: <pre>div { background-image: url(plasma.png); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box } </pre> The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved: <pre>p { background-image: url(tubes.png); background-size: 50% auto; background-origin: border-box } </pre> This example forces the background image to be 15 by 15 pixels: <pre>p { background-size: 15px 15px; background-image: url(tile.png)} </pre> This example uses the image’s natural size. Note that this is the only possible behavior in CSS level 1 and 2. <pre>body { background-size: auto; /* default */ background-image: url(flower.png) } </pre> The following example rounds the height of the image to 33.3%, up from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, three images fit exactly. The width of the image is 20% of the background positioning area width and is not rounded. <pre>p { background-image: url(chain.png); background-repeat: no-repeat round; background-size: 20% 30% } </pre> </div> If <a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat③">background-repeat</a> is <a class="css" data-link-type="maybe" href="#valdef-background-repeat-round" id="ref-for-valdef-background-repeat-round①">round</a> for one (or both) dimensions, there is a second step. The UA must scale the image in that dimension (or both dimensions) so that it fits a whole number of times in the <a data-link-type="dfn" href="#background-positioning-area" id="ref-for-background-positioning-area①④">background positioning area</a>. In the case of the width (height is analogous): <blockquote> If <var>X</var> ≠ 0 is the width of the image after step one and <var>W</var> is the width of the background positioning area, then the rounded width <var>X'</var> = <var>W</var> / round(<var>W</var> / <var>X</var>) where round() is a function that returns the nearest natural number (integer greater than zero). </blockquote> If <a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat④">background-repeat</a> is <a class="css" data-link-type="maybe" href="#valdef-background-repeat-round" id="ref-for-valdef-background-repeat-round②">round</a> for one dimension only and if <a class="property css" data-link-type="property" href="#propdef-background-size" id="ref-for-propdef-background-size③">background-size</a> is <a class="css" data-link-type="maybe" href="#valdef-background-size-auto" id="ref-for-valdef-background-size-auto④">auto</a> for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored. <div class="example" id="example-a61fb097"> <a class="self-link" href="#example-a61fb097"></a> In this example the background image is shown at its natural size: <pre>div { background-image: url(image1.png); background-repeat: repeat; /* default */ background-size: auto } /* default */ </pre> In the following example, the background is shown with a width of 3em and its height is scaled proportionally to keep the original aspect ratio: <pre>div { background-image: url(image2.png); background-repeat: repeat; /* default */ background-size: 3em } /* = '3em auto' */ </pre> In the following example, the background is shown with a width of approximately 3em: scaled so that it fits a whole number of times in the width of the background. The height is scaled proportionally to keep the original aspect ratio: <pre>div { background-image: url(image3.png); background-repeat: round repeat; background-size: 3em auto } </pre> In the following example, the background image is shown with a width of 3em and a height that is either the height corresponding to that width at the original aspect ratio or slightly less: <pre>div { background-image: url(image4.png); background-repeat: repeat round; background-size: 3em auto } </pre> In the following example, the background image is shown with a height of approximately 4em: scaled slightly so that it fits a whole number of times in the background height. The width is the approximately the width that corresponds to a 4em height at the original aspect ratio: scaled slightly so that it fits a whole number of times in the background width. <pre>div { background-image: url(image5.png); background-repeat: round; background-size: auto 4em } </pre> </div> If the background image’s width or height resolves to zero, this causes the image not to be displayed. (The effect is the same as if it had been a transparent image.) See <a href="#layering">§ 2.1 Layering Multiple Background Images</a> for how <a class="property css" data-link-type="property" href="#propdef-background-size" id="ref-for-propdef-background-size④">background-size</a> interacts with other comma-separated background properties to form each <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer①③">background image layer</a>. <h3 class="heading settled" data-level="2.10" id="background">2.10. Backgrounds Shorthand: the <a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background①">background</a> property<a class="self-link" href="#background"></a></h3> <table class="def propdef" data-link-for-hint="background"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-background">background</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-bg-layer" id="ref-for-typedef-bg-layer"><bg-layer></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑦">#</a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma">,</a> <a class="production css" data-link-type="type" href="#typedef-final-bg-layer" id="ref-for-typedef-final-bg-layer"><final-bg-layer></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties </table> The <a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background②">background</a> property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property">shorthand property</a> for setting most background properties at the same place in the style sheet. The number of comma-separated items defines the number of <a data-link-type="dfn" href="#background-image-layer" id="ref-for-background-image-layer①④">background image layers</a>. Given a valid declaration, for each layer the shorthand first sets the corresponding value of each of <a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image⑤">background-image</a>, <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position⑨">background-position</a>, <a class="property css" data-link-type="property" href="#propdef-background-size" id="ref-for-propdef-background-size⑤">background-size</a>, <a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat⑤">background-repeat</a>, <a class="property css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin④">background-origin</a>, <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip⑥">background-clip</a> and <a class="property css" data-link-type="property" href="#propdef-background-attachment" id="ref-for-propdef-background-attachment③">background-attachment</a> to that property’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#initial-value" id="ref-for-initial-value">initial value</a>, then assigns any explicit values specified for this layer in the declaration. Finally <a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color④">background-color</a> is set to the specified color, if any, else set to its initial value. This property’s value is given as a comma-separated list of values where <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-bg-layer"><bg-layer></dfn> = <a class="production" data-link-type="type" href="#typedef-bg-image" id="ref-for-typedef-bg-image③"><bg-image></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="type" href="#typedef-bg-position" id="ref-for-typedef-bg-position④"><bg-position></a> [ / <a class="production" data-link-type="type" href="#typedef-bg-size" id="ref-for-typedef-bg-size③"><bg-size></a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> <a class="production" data-link-type="type" href="#typedef-repeat-style" id="ref-for-typedef-repeat-style⑤"><repeat-style></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any②">||</a> <a class="production" data-link-type="type" href="#typedef-attachment" id="ref-for-typedef-attachment③"><attachment></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any③">||</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box②"><visual-box></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any④">||</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box③"><visual-box></a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-final-bg-layer"><final-bg-layer></dfn> = <a class="production" data-link-type="type" href="#typedef-bg-image" id="ref-for-typedef-bg-image④"><bg-image></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑤">||</a> <a class="production" data-link-type="type" href="#typedef-bg-position" id="ref-for-typedef-bg-position⑤"><bg-position></a> [ / <a class="production" data-link-type="type" href="#typedef-bg-size" id="ref-for-typedef-bg-size④"><bg-size></a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑥">||</a> <a class="production" data-link-type="type" href="#typedef-repeat-style" id="ref-for-typedef-repeat-style⑥"><repeat-style></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑦">||</a> <a class="production" data-link-type="type" href="#typedef-attachment" id="ref-for-typedef-attachment④"><attachment></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑧">||</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box④"><visual-box></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑨">||</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box⑤"><visual-box></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any①⓪">||</a> <a class="production" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color⑤"><'background-color'></a></pre> Note: A color is permitted in <a class="production css" data-link-type="type" href="#typedef-final-bg-layer" id="ref-for-typedef-final-bg-layer①"><final-bg-layer></a>, but not in <a class="production css" data-link-type="type" href="#typedef-bg-layer" id="ref-for-typedef-bg-layer①"><bg-layer></a>. If one <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box⑥"><visual-box></a> value is present then it sets both <a class="property css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin⑤">background-origin</a> and <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip⑦">background-clip</a> to that value. If two values are present, then the first sets background-origin and the second background-clip. <div class="example" id="example-15a7e3d5"> <a class="self-link" href="#example-15a7e3d5"></a> In the first rule of the following example, only a value for <a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color⑥">background-color</a> has been given and the other individual properties are set to their initial values. In the second rule, many individual properties have been specified. <pre>body { background: red } p { background: url("chess.png") 40% / 10em gray round fixed border-box; } </pre> The first rule is equivalent to: <pre>body { background-color: red; background-position: 0% 0%; background-size: auto; background-repeat: repeat; background-clip: border-box; background-origin: padding-box; background-attachment: scroll; background-image: none } </pre> The second is equivalent to: <pre>p { background-color: gray; background-position: 40% 50%; background-size: 10em auto; background-repeat: round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(chess.png) } </pre> </div> <div class="example" id="example-ff3ed279"> <a class="self-link" href="#example-ff3ed279"></a> The following example shows how a both a background color (#CCC) and a background image (url(metal.jpg)) are set. The image is rescaled to the full width of the element: <pre>E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat} </pre> </div> <div class="example" id="example-1a1113f1"> <a class="self-link" href="#example-1a1113f1"></a> Another example shows equivalence: <pre>div { background: padding-box url(paper.jpg) white center } div { background-color: white; background-image: url(paper.jpg); background-repeat: repeat; background-attachment: scroll; background-position: center; background-clip: padding-box; background-origin: padding-box; background-size: auto auto } </pre> </div> <div class="example" id="example-3524ad83"> <a class="self-link" href="#example-3524ad83"></a> The following declaration with multiple, comma-separated values <pre>background: url(a.png) top left no-repeat, url(b.png) center / 100% 100% no-repeat, url(c.png) white; </pre> is equivalent to <pre>background-image: url(a.png), url(b.png), url(c.png); background-position: top left, center, top left; background-repeat: no-repeat, no-repeat, repeat; background-clip: border-box, border-box, border-box; background-origin: padding-box, padding-box, padding-box; background-size: auto auto, 100% 100%, auto auto; background-attachment: scroll, scroll, scroll; background-color: white; </pre> </div> <h3 class="heading settled" data-level="2.11" id="special-backgrounds">2.11. Backgrounds of Special Elements<a class="self-link" href="#special-backgrounds"></a></h3> The document <a href="https://www.w3.org/TR/CSS2/intro.html#the-canvas">canvas</a> is the infinite surface over which the document is rendered. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#root-element" id="ref-for-root-element">root element</a> (or, in the case of HTML, the <body> element) as described below. However, if the element whose background would be used for the canvas is <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display" id="ref-for-propdef-display">display: none</a>, then the <a data-link-type="dfn" href="#canvas-background" id="ref-for-canvas-background">canvas background</a> is transparent. If the <a data-link-type="dfn" href="#canvas-background" id="ref-for-canvas-background①">canvas background</a> is not opaque, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="canvas-surface">canvas surface</dfn> below it shows through. The texture of the <a data-link-type="dfn" href="#canvas-surface" id="ref-for-canvas-surface">canvas surface</a> is UA-dependent (but is typically an opaque white). <h4 class="heading settled" data-level="2.11.1" id="root-background">2.11.1. The Canvas Background and the Root Element<a class="self-link" href="#root-background"></a></h4> The background of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#root-element" id="ref-for-root-element①">root element</a> becomes the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="canvas-background">canvas background</dfn> and its <a data-link-type="dfn" href="#background-painting-area" id="ref-for-background-painting-area⑦">background painting area</a> extends to cover the entire <a href="https://www.w3.org/TR/CSS2/intro.html#the-canvas">canvas</a>. However, any images are sized and positioned relative to the root element’s box as if they were painted for that element alone. (In other words, the <a href="#background-positioning-area" id="ref-for-background-positioning-area①⑤">background positioning area</a> is determined as for the root element.) The root element does not paint this background again, i.e., the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value①">used value</a> of its background is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent①">transparent</a>. <h4 class="heading settled" data-level="2.11.2" id="body-background">2.11.2. The Canvas Background and the HTML <body> Element<a class="self-link" href="#body-background"></a></h4> For documents whose root element is an HTML <code class="html">HTML</code> element or an XHTML <code class="html">html</code> element <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a>: if the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed value</a> of <a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image⑥">background-image</a> on the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#root-element" id="ref-for-root-element②">root element</a> is <a class="css" data-link-type="maybe" href="#valdef-background-image-none" id="ref-for-valdef-background-image-none②">none</a> and its <a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color⑦">background-color</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent②">transparent</a>, user agents must instead propagate the computed values of the background properties from that element’s first HTML <code class="html">BODY</code> or XHTML <code class="html">body</code> child element. The <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value②">used values</a> of that <code class="html">BODY</code> element’s background properties are their <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#initial-value" id="ref-for-initial-value①">initial values</a>, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background using the <code class="html">BODY</code> element rather than the <code class="html">HTML</code> element. Note: Using <a data-link-type="dfn" href="https://www.w3.org/TR/css-contain-2/#containment" id="ref-for-containment">containment</a> disables this special handling of the HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a></code> element. See the <a href="https://www.w3.org/TR/css-contain-1/#contain-property"><cite>CSS Containment 1</cite> § 2 Strong Containment: the contain property</a> for details. <div class="example" id="example-8733c37a"> <a class="self-link" href="#example-8733c37a"></a> According to these rules, the canvas underlying the following HTML document will have a “marble” background: <pre><!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN' > <html> <head> <title>Setting the canvas background</title> <style type="text/css"> body { background: url("http://example.org/marble.png") } </style> </head> <body> My background is marble. </body> </html> </pre> </div> <h4 class="heading settled" data-level="2.11.3" id="first-line-background">2.11.3. The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-3/#sel-first-line" id="ref-for-sel-first-line③">::first-line</a> Pseudo-element‘s Background<a class="self-link" href="#first-line-background"></a></h4> The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-3/#sel-first-line" id="ref-for-sel-first-line④">::first-line</a> pseudo-element is like an inline-level element for the purposes of the background (see section 5.12.1 of <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>). That means, e.g., that in a left-justified first line, the background does not necessarily extend all the way to the right edge. <h2 class="heading settled" data-level="3" id="borders">3. Borders<a class="self-link" href="#borders"></a></h2> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border①">border</a> can either be a predefined style (solid line, double line, dotted line, pseudo-3D border, etc.) or it can be an image. In the former case, various properties define the style (<a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style">border-style</a>), color (<a class="property css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color">border-color</a>), and thickness (<a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width">border-width</a>) of the border. <h3 class="heading settled" data-level="3.1" id="border-color">3.1. Line Colors: the <a class="property css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color①">border-color</a> properties<a class="self-link" href="#border-color"></a></h3> <table class="def propdef" data-link-for-hint="border-top-color"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-top-color">border-top-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-right-color">border-right-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-bottom-color">border-bottom-color</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-left-color">border-left-color</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color①"><color></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td><a href="https://www.w3.org/TR/css-color-4/#currentcolor-color">currentColor</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box①">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box①">ruby annotation containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>computed color <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color②">border-color</a> </table> <table class="def propdef" data-link-for-hint="border-color"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-color">border-color</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color②"><color></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,4}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>(see individual properties) <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box②">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box②">ruby annotation containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties </table> These properties set the foreground <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="border color" data-noexport id="border-color-dfn">color</dfn> of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border②">border</a> specified by the <a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style①">border-style</a> properties. The <a class="property css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color③">border-color</a> property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property①">shorthand property</a> for setting <a class="property css" data-link-type="property" href="#propdef-border-top-color" id="ref-for-propdef-border-top-color">border-top-color</a>, <a class="property css" data-link-type="property" href="#propdef-border-right-color" id="ref-for-propdef-border-right-color">border-right-color</a>, <a class="property css" data-link-type="property" href="#propdef-border-bottom-color" id="ref-for-propdef-border-bottom-color">border-bottom-color</a>, and <a class="property css" data-link-type="property" href="#propdef-border-left-color" id="ref-for-propdef-border-left-color">border-left-color</a> in a single declaration. If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively. <h3 class="heading settled" data-level="3.2" id="border-style">3.2. Line Patterns: the <a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style②">border-style</a> properties<a class="self-link" href="#border-style"></a></h3> <table class="def propdef" data-link-for-hint="border-top-style"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-top-style">border-top-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-right-style">border-right-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-bottom-style">border-bottom-style</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-left-style">border-left-style</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-line-style" id="ref-for-typedef-line-style"><line-style></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box③">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box③">ruby annotation containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style③">border-style</a> </table> <table class="def propdef" data-link-for-hint="border-style"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-style">border-style</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-line-style" id="ref-for-typedef-line-style①"><line-style></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range③">{1,4}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>(see individual properties) <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box④">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box④">ruby annotation containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties </table> These properties control whether a <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border③">border</a> appears, and if it does what <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="border style" data-noexport id="border-style-dfn">style</dfn> it’s drawn in (if it is not overridden by a <a href="#border-images">border image</a>). The <a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style④">border-style</a> property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property②">shorthand property</a> for setting <a class="property css" data-link-type="property" href="#propdef-border-top-style" id="ref-for-propdef-border-top-style">border-top-style</a>, <a class="property css" data-link-type="property" href="#propdef-border-right-style" id="ref-for-propdef-border-right-style">border-right-style</a>, <a class="property css" data-link-type="property" href="#propdef-border-bottom-style" id="ref-for-propdef-border-bottom-style">border-bottom-style</a>, and <a class="property css" data-link-type="property" href="#propdef-border-left-style" id="ref-for-propdef-border-left-style">border-left-style</a> in a single declaration. If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively. The style is specified as a <a class="production css" data-link-type="type" href="#typedef-line-style" id="ref-for-typedef-line-style②"><line-style></a> keyword, where <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-line-style"><a class="production" data-link-type="type" href="#typedef-line-style" id="ref-for-typedef-line-style③"><line-style></a></dfn> = none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑧">|</a> hidden <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑨">|</a> dotted <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⓪">|</a> dashed <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③①">|</a> solid <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③②">|</a> double <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③③">|</a> groove <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③④">|</a> ridge <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑤">|</a> inset <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑥">|</a> outset</pre> Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-none">none</dfn> <dd> No border. Color and width are ignored (i.e., the border has width 0). Note this means that the initial value of <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width">border-image-width</a> will also resolve to zero. <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-hidden">hidden</dfn> <dd> Same as <a class="css" data-link-type="maybe" href="#valdef-line-style-none" id="ref-for-valdef-line-style-none">none</a>, but has different behavior in the border conflict resolution rules for border-collapsed tables <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-dotted">dotted</dfn> <dd> A series of round dots. <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-dashed">dashed</dfn> <dd> A series of square-ended dashes. <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-solid">solid</dfn> <dd> A single line segment. <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-double">double</dfn> <dd> Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width①">border-width</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-groove">groove</dfn> <dd> Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the specified <a class="property css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color④">border-color</a>.) <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-ridge">ridge</dfn> <dd> Looks as if it were coming out of the canvas. <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-inset">inset</dfn> <dd> Looks as if the content on the inside of the border is sunken into the canvas. Treated as <a class="css" data-link-type="maybe" href="#valdef-line-style-ridge" id="ref-for-valdef-line-style-ridge">ridge</a> in the <a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <dt><dfn class="dfn-paneled css" data-dfn-for="<line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border" data-dfn-type="value" data-export id="valdef-line-style-outset">outset</dfn> <dd> Looks as if the content on the inside of the border is raised out of the canvas. Treated as <a class="css" data-link-type="maybe" href="#valdef-line-style-groove" id="ref-for-valdef-line-style-groove">groove</a> in the <a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> </dl> Borders are drawn in front of the element’s background, but behind the element’s content (in case it overlaps). <figure> <img alt="Examples of border styles" height="383" src="images/borderstyles.png" width="669"> <figcaption>Example renderings of the predefined border styles.</figcaption> </figure> Note: Border colors close to black or white may need different color calculations than colors in between in order to create the required “3D” effect of <a class="css" data-link-type="maybe" href="#valdef-line-style-groove" id="ref-for-valdef-line-style-groove①">groove</a>, <a class="css" data-link-type="maybe" href="#valdef-line-style-ridge" id="ref-for-valdef-line-style-ridge①">ridge</a>, <a class="css" data-link-type="maybe" href="#valdef-line-style-inset" id="ref-for-valdef-line-style-inset">inset</a>, or <a class="css" data-link-type="maybe" href="#valdef-line-style-outset" id="ref-for-valdef-line-style-outset">outset</a>. Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical. Note: This specification does not define how borders of different styles should be joined in the corner. Also note that rounded corners may cause the corners and the contents to overlap, if the padding is less than the radius of the corner. <h3 class="heading settled" data-level="3.3" id="border-width">3.3. Line Thickness: the <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width②">border-width</a> properties<a class="self-link" href="#border-width"></a></h3> <table class="def propdef" data-link-for-hint="border-top-width"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-top-width">border-top-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-right-width">border-right-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-bottom-width">border-bottom-width</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-left-width">border-left-width</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-line-width" id="ref-for-typedef-line-width"><line-width></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>medium <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box⑤">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box⑤">ruby annotation containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>absolute length, <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#snap-a-length-as-a-border-width" id="ref-for-snap-a-length-as-a-border-width">snapped as a border width</a>; zero if the border style is <a class="css" data-link-type="maybe" href="#valdef-line-style-none" id="ref-for-valdef-line-style-none①">none</a> or <a class="css" data-link-type="maybe" href="#valdef-line-style-hidden" id="ref-for-valdef-line-style-hidden">hidden</a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width③">border-width</a> </table> <table class="def propdef" data-link-for-hint="border-width"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-width">border-width</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-line-width" id="ref-for-typedef-line-width①"><line-width></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range④">{1,4}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>(see individual properties) <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box⑥">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box⑥">ruby annotation containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties </table> These properties specify the thickness of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border④">border</a>, i.e. the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="border-width-dfn">border width</dfn>. Where <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-line-width"><a class="production" data-link-type="type" href="#typedef-line-width" id="ref-for-typedef-line-width②"><line-width></a></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①"><length [0,∞]></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑦">|</a> thin <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑧">|</a> medium <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑨">|</a> thick</pre> Negative values are invalid. The <dfn class="dfn-paneled css" data-dfn-for="<line-width>, border-width, border-top-width, border-left-width, border-bottom-width, border-right-width, border" data-dfn-type="value" data-export id="valdef-line-width-thin">thin</dfn>, <dfn class="dfn-paneled css" data-dfn-for="<line-width>, border-width, border-top-width, border-left-width, border-bottom-width, border-right-width, border" data-dfn-type="value" data-export id="valdef-line-width-medium">medium</dfn>, and <dfn class="dfn-paneled css" data-dfn-for="<line-width>, border-width, border-top-width, border-left-width, border-bottom-width, border-right-width, border" data-dfn-type="value" data-export id="valdef-line-width-thick">thick</dfn> keywords are equivalent to 1px, 3px, and 5px, respectively. The <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width④">border-width</a> property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property③">shorthand property</a> for setting <a class="property css" data-link-type="property" href="#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a>, <a class="property css" data-link-type="property" href="#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a>, <a class="property css" data-link-type="property" href="#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a>, and <a class="property css" data-link-type="property" href="#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a> in a single declaration. If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively. Note: Although the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#initial-value" id="ref-for-initial-value②">initial</a> width is <a class="css" data-link-type="maybe" href="#valdef-line-width-medium" id="ref-for-valdef-line-width-medium">medium</a>, the initial style is <a class="css" data-link-type="maybe" href="#valdef-line-style-none" id="ref-for-valdef-line-style-none②">none</a>; therefore the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value③">used</a> initial width is 0. <h3 class="heading settled" data-level="3.4" id="border-shorthands">3.4. Border Shorthand Properties<a class="self-link" href="#border-shorthands"></a></h3> <table class="def propdef" data-link-for-hint="border-top"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-top">border-top</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-right">border-right</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-bottom">border-bottom</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-left">border-left</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-line-width" id="ref-for-typedef-line-width③"><line-width></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any①①">||</a> <a class="production css" data-link-type="type" href="#typedef-line-style" id="ref-for-typedef-line-style④"><line-style></a> || <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color③"><color></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>See individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box⑦">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box⑦">ruby annotation containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties </table> These <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property④">shorthand properties</a> set the <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width⑤">border-width</a>, <a class="property css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color⑤">border-color</a>, and <a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style⑤">border-style</a> of the top, right, bottom, and left <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border" id="ref-for-border⑤">borders</a> of a box. Omitted values are set to their <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#initial-value" id="ref-for-initial-value④">initial values</a>. <table class="def propdef" data-link-for-hint="border"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border">border</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-line-width" id="ref-for-typedef-line-width④"><line-width></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any①③">||</a> <a class="production css" data-link-type="type" href="#typedef-line-style" id="ref-for-typedef-line-style⑤"><line-style></a> || <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color④"><color></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>See individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements except <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box⑧">ruby base containers</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box" id="ref-for-ruby-annotation-container-box⑧">ruby annotation containers</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties </table> The <a class="property css" data-link-type="property" href="#propdef-border" id="ref-for-propdef-border①">border</a> property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property⑤">shorthand property</a> for setting the same <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width⑥">border-width</a>, <a class="property css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color⑥">border-color</a>, and <a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style⑥">border-style</a> for all four borders of a box. Unlike the shorthand <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-margin" id="ref-for-propdef-margin">margin</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-padding" id="ref-for-propdef-padding">padding</a> properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used. The <a class="property css" data-link-type="property" href="#propdef-border" id="ref-for-propdef-border③">border</a> shorthand also resets <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image②">border-image</a> to its initial value. It is therefore recommended that authors use the border shorthand, rather than other shorthands or the individual properties, to override any border settings earlier in the cascade. This will ensure that border-image has also been reset to allow the new styles to take effect. Note: The CSS Working Group intends for the <a class="property css" data-link-type="property" href="#propdef-border" id="ref-for-propdef-border⑤">border</a> shorthand to reset all border properties in future levels of CSS as well. For example, if a border-characters property is introduced in the future to allow glyphs as borders, it will also be reset by the border shorthand. By using the border shorthand to reset borders, authors can be guaranteed a “blank canvas” no matter what properties are introduced in the future. <div class="example" id="example-e8ed94e0"> <a class="self-link" href="#example-e8ed94e0"></a> For example, the first rule below is equivalent to the set of five rules shown after it: <pre>p { border: solid red } p { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red; border-image: none; } </pre> </div> Since, to some extent, the properties have overlapping functionality, the order in which the rules are specified is important. <div class="example" id="example-10fca894"> <a class="self-link" href="#example-10fca894"></a> Consider this example: <pre>blockquote { border-color: red; border-left: double; color: black } </pre> In the above example, the color of the left border is black, while the other borders are red. This is due to <a class="property css" data-link-type="property" href="#propdef-border-left" id="ref-for-propdef-border-left">border-left</a> setting the width, style, and color. Since the color value is not given by the border-left property, it will be taken from the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a> property. The fact that the color property is set after the border-left property is not relevant. </div> <h2 class="heading settled" data-level="4" id="corners">4. Rounded Corners<a class="self-link" href="#corners"></a></h2> <h3 class="heading settled" data-level="4.1" id="border-radius">4.1. Curve Radii: the <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius①">border-radius</a> properties<a class="self-link" href="#border-radius"></a></h3> <table class="def propdef" data-link-for-hint="border-top-left-radius"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-top-left-radius">border-top-left-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-top-right-radius">border-top-right-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-bottom-right-radius">border-bottom-right-radius</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-bottom-left-radius">border-bottom-left-radius</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①③"><length-percentage [0,∞]></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑤">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements (but see prose) <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>Refer to corresponding dimension of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box②">border box</a>. <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>pair of computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①④"><length-percentage></a> values <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value <tr> <th><a href="https://drafts.csswg.org/css-logical-1/#logical-property-group">Logical property group:</a> <td><a class="css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius②">border-radius</a> </table> <table class="def propdef" data-link-for-hint="border-radius"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-radius">border-radius</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑤"><length-percentage [0,∞]></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑥">{1,4}</a> [ / <length-percentage [0,∞]>{1,4} ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements (but see prose) <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>Refer to corresponding dimension of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box③">border box</a>. <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties </table> The two <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑦"><length-percentage></a> values of the <a class="property css" data-link-type="property">border-*-radius</a> properties define the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="border radius" data-noexport id="border-radii">radii</dfn> of a quarter ellipse that defines the shape of the corner of the outer <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-edge" id="ref-for-border-edge">border edge</a> (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box④">border box</a>, whereas percentages for the vertical radius refer to the height of the border box. Negative values are invalid. <figure> <img alt="Diagram of the inscribed ellipse" height="179" src="images/corner.png" width="289"> <figcaption> The two values of <a class="css" data-link-type="propdesc" href="#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius">border-top-left-radius: 55pt 25pt</a> define the curvature of the corner. </figcaption> </figure> <div class="example" id="example-6b4b7b7d"> <a class="self-link" href="#example-6b4b7b7d"></a> This example draws ovals of 15em wide and 10em high: <pre>DIV.standout { width: 13em; height: 8em; border: solid black 1em; border-radius: 7.5em 5em } </pre> </div> The <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius③">border-radius</a> shorthand sets all four <a class="property css" data-link-type="property">border-*-radius</a> properties. If values are given before and after the slash, then the values before the slash set the horizontal radii and the values after the slash set the vertical radii. If there is no slash, then the values set the radii in both axes equally. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left. <div class="example" id="example-19e399d6"> <a class="self-link" href="#example-19e399d6"></a> <pre>border-radius: 4em; </pre> is equivalent to <pre>border-top-left-radius: 4em; border-top-right-radius: 4em; border-bottom-right-radius: 4em; border-bottom-left-radius: 4em; </pre> and <pre>border-radius: 2em 1em 4em / 0.5em 3em; </pre> is equivalent to <pre>border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; </pre> </div> <h3 class="heading settled" data-level="4.2" id="corner-shaping">4.2. Corner Shaping<a class="self-link" href="#corner-shaping"></a></h3> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding-edge" id="ref-for-padding-edge①">padding edge</a> (inner border) radius is the outer border radius minus the corresponding border thickness. In the case where this results in a negative value, the inner radius is zero. (In such cases the center of the border’s inner curve might not coincide with that of its outer curve.) Likewise the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-edge" id="ref-for-content-edge">content edge</a> radius is the padding edge radius minus the corresponding <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding" id="ref-for-padding①">padding</a>, or if that is negative, zero. The border and padding thicknesses in the curved region are thus interpolated from the adjoining sides, and when two adjoining borders are of different thicknesses the corner will show a smooth transition between the thicker and thinner borders. All border styles (<a class="css" data-link-type="maybe" href="#valdef-line-style-solid" id="ref-for-valdef-line-style-solid">solid</a>, <a class="css" data-link-type="maybe" href="#valdef-line-style-dotted" id="ref-for-valdef-line-style-dotted">dotted</a>, <a class="css" data-link-type="maybe" href="#valdef-line-style-inset" id="ref-for-valdef-line-style-inset①">inset</a>, etc.) follow the curve of the border. <figure> <img alt="The effect of rounded corners on unequal borders" height="176" src="images/smooth-radius.png" width="407"> <figcaption> The effect of a rounded corner when the two borders it connects are of unequal thickness (left) and the effect of a rounded corner on borders that are thicker than the radius of the corner (right). </figcaption> </figure> Note: If the center of a corner’s outer curve is past an opposite <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding-edge" id="ref-for-padding-edge③">padding edge</a> (in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-area" id="ref-for-border-area③">border area</a> of a side opposite the corner), the inner curve will not be a full quarter ellipse. <figure> <table> <tbody> <tr> <td> <pre>p { width: 70px; height: 70px; border: solid 30px; border-color: orange orange silver silver; border-top-right-radius: 100%; } </pre> <td> <img alt="The curved corner is an arc from the top left corner sweeping across the top right corner to the bottom right corner, describing a quarter-ellipse; but since the opposite sides have a border thickness the padding edge curve starts inward from the outer arc's endpoints." height="142" src="images/partial-curve.png" width="141"> </table> <figcaption> Where the border-radius curve extends into the opposite sides' borders, the arc of the padding edge is less than 90°. </figcaption> </figure> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin-edge" id="ref-for-margin-edge">margin edge</a>, being outside the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-edge" id="ref-for-border-edge①">border edge</a>, calculates its radius by adding the corresponding margin thickness to each border radius. However, in order to create a sharper corner when the border radius is small (and thus ensure continuity between round and sharp corners), when the <a data-link-type="dfn" href="#border-radii" id="ref-for-border-radii">border radius</a> is less than the margin, the margin is multiplied by the proportion 1 + (<var>r</var>-1)3, where <var>r</var> is the ratio of the border radius to the margin, in calculating the corner radii of the margin box shape. <h3 class="heading settled" data-level="4.3" id="corner-clipping">4.3. Corner Clipping<a class="self-link" href="#corner-clipping"></a></h3> Although <a href="#border-image">border images</a> are not affected by <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius④">border-radius</a>, other effects that clip painting or event handling to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-edge" id="ref-for-border-edge②">border</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#padding-edge" id="ref-for-padding-edge④">padding</a>, or <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#content-edge" id="ref-for-content-edge①">content</a> edge must clip to their respective curves. For example, backgrounds clip to the curve specified by <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip⑨">background-clip</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> values other than visible to the curved padding edge (when overflow on both axes is not visible), <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#replaced-element" id="ref-for-replaced-element">replaced element</a> content to the curved content edge, pointer events to the curved border edge, etc. Note: As <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius⑤">border-radius</a> reduces the interactive area of an element authors should make sure the remaining interactive area conforms to recommended minima for the platforms they target; in particular, conforming to recommended minimum touch target sizes may require larger widths and heights when border-radius is used. <div class="example" id="example-b5486bac"> <a class="self-link" href="#example-b5486bac"></a> This example adds appropriate padding, so that the contents do not overflow the corners. Note that there is no border, but the background will still have rounded corners. <pre>DIV { background: black; color: white; border-radius: 1em; padding: 1em } </pre> </div> <h3 class="heading settled" data-level="4.4" id="corner-transitions">4.4. Color and Style Transitions<a class="self-link" href="#corner-transitions"></a></h3> Color and style transitions must be contained within the segment of the border that intersects the smallest rectangle that contains both border radii as well as the center of the inner curve (which may be a point representing the corner of the padding edge, if the border radii are smaller than the <a data-link-type="dfn" href="#border-width-dfn" id="ref-for-border-width-dfn">border width</a>). If one of these borders is zero-width, then the other border takes up the entire transitional area. Otherwise, the center of color and style transitions between adjoining borders is a point along the curve that is a continuous monotonic function of the ratio of the border widths. However it is not defined what these transitions look like or what function maps from this ratio to a point on the curve. <figure> <img alt="Illustration of the transition region on curved corners" height="178" src="images/transition-region.png" width="600"> <figcaption> Given these corner shapes, color and style transitions must be contained within the green region. In case D the rectangle defined by the border radii does not include the center of the inner curve (which is a sharp corner), so the transition region is expanded to include that corner. Transitions may take up the entire transition region, but are not required to: For example, a gradient color transition between two solid border styles might take up only the region bounded by the tips of the outer radii and the tips of the inner radii (represented in case D by the dark green region). </figcaption> </figure> <h3 class="heading settled" data-level="4.5" id="corner-overlap">4.5. Overlapping Curves<a class="self-link" href="#corner-overlap"></a></h3> Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap. The algorithm for reducing radii is as follows: Let <var>f</var> = min(<var>Li</var>/<var>Si</var>), where <var>i</var> ∈ {top, right, bottom, left}, <var>Si</var> is the sum of the two corresponding radii of the corners on side <var>i</var>, and <var>Ltop</var> = <var>Lbottom</var> = the width of the box, and <var>Lleft</var> = <var>Lright</var> = the height of the box. If <var>f</var> < 1, then all corner radii are reduced by multiplying them by <var>f</var>. Note: This formula ensures that quarter circles remain quarter circles and large radii remain larger than smaller ones, but it may reduce corners that were already small enough, which may make borders of nearby elements that should look the same look different. If the curve interferes with UI elements such as scrollbars, the UA may further reduce the used value of the affected border radii (and only the affected border radii) as much as necessary, but no more. <div class="example" id="example-830e0800"> <a class="self-link" href="#example-830e0800"></a> For example, the borders A of the <a href="#reduced-radius">figure below</a> might be the result of <pre>box-sizing: border-box; width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em </pre> The height (2.5em) is enough for the specified radii (0.5em plus 2.0em). However, if the height is only 2em, <pre>box-sizing: border-box; width: 6em; height: 2em; border-radius: 0.5em 2em 0.5em 2em </pre> all corners need to be reduced by a factor 0.8 to make them fit. The used border radii thus are 0.4em (instead of 0.5em) and 1.6em (instead of 2em). See borders B in the figure. <figure id="reduced-radius"> <img alt="[image: rectangle with two tiny rounded corners and two very large ones, on opposite corners]" height="168" src="images/corner-large-mix.png" width="432"> <figcaption> These rounded corner might be the result of 'width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em'' for A; and ditto but with <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height: 2em</a> for B. </figcaption> </figure> </div> <h3 class="heading settled" data-level="4.6" id="border-radius-tables">4.6. Effect on Tables<a class="self-link" href="#border-radius-tables"></a></h3> The <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius⑦">border-radius</a> properties do apply to table, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/CSS21/tables.html#value-def-inline-table" id="ref-for-value-def-inline-table">inline-table</a>, and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/CSS21/tables.html#value-def-table-cell" id="ref-for-value-def-table-cell">table-cell</a> boxes in separated borders mode (<a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse">border-collapse: separate</a>). When border-collapse is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-border-collapse-collapse" id="ref-for-valdef-border-collapse-collapse">collapse</a>, they have no effect. <h2 class="heading settled" data-level="5" id="border-images">5. Border Images<a class="self-link" href="#border-images"></a></h2> Authors can specify an image to be used in place of the border styles. In this case, the border’s design is taken from the sides and corners of an image specified with <a class="property css" data-link-type="property" href="#propdef-border-image-source" id="ref-for-propdef-border-image-source">border-image-source</a>, whose pieces may be sliced, scaled, and stretched in various ways to fit the size of the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area">border image area</a>. The border-image properties do not affect layout: layout of the box, its content, and surrounding content is based on the <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width⑦">border-width</a> and <a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style⑦">border-style</a> properties only. <div class="example" id="example-8488cbd9"> <a class="self-link" href="#example-8488cbd9"></a> This example creates a top and bottom border consisting of a whole number of orange diamonds and a left and right border of a single, stretched diamond. The corners are diamonds of a different color. The image to tile is as follows. Apart from the diamonds, it is transparent: <img alt="Tile for border" height="81" src="images/border.png" width="81"> The image is 81 by 81 pixels and has to be divided into 9 equal parts. The style rules could thus be as follows: <pre>DIV { border: double orange 1em; border-image: url("border.png") 27 round stretch; } </pre> The result, when applied to a DIV of 12 by 5em, will be similar to this: <img alt="element with a diamond border" height="116" src="images/borderresult.png" width="239"> </div> <div class="example" id="example-28370333"> <a class="self-link" href="#example-28370333"></a> This shows a more complicated example, demonstrating how the border image corresponds to the fallback border-style but can also extend beyond the border area. The border image is a wavy green border with an extended corner effect: <figure> <img alt="Diagram: The border image shows a wavy green border with more exaggerated waves towards the corners, which are capped by a disconnected green circle. Four cuts at 124px offsets from each side divide the image into 124px-wide square corners, 124px-wide but thin side slices, and a small center square." height="375" src="images/groovy-border-image-slice.png" width="396"> <figcaption> The <a class="property css" data-link-type="property" href="#propdef-border-image-source" id="ref-for-propdef-border-image-source①">border-image-source</a> image, with the four <a class="property css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice">border-image-slice</a> cuts at 124px dividing the image into nine parts. </figcaption> </figure> The rest of the border properties then interact to lay out the tiles as follows: <figure> <img alt="Diagram: The image-less (fallback) rendering has a green double border. The rendering with border-image shows the wavy green border, ith the waves getting longer as they reach the corners. The corner tiles render as 124px-wide squares and the side tiles repeat a whole number of times to fill the space in between. Because of the gradual corner effects, the tiles extend deep into the padding area. The whole border image effect is outset 31px, so that the troughs of the waves align just outside the padding edge." height="537" src="images/border-image.png" width="452"> <figcaption> Diagram of all border-image properties and how they interact, and showing the rendering with and without the border-image in effect. </figcaption> </figure> Here, even though the <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width⑧">border-width</a> is 12px, the <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width①">border-image-width</a> property computes to 124px. The <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area①">border image area</a> is then outset 31px from the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box⑥">border box</a> and into the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#margin-area" id="ref-for-margin-area">margin area</a>. If the border-image fails to load (or if border images are not supported by the UA), the fallback rendering uses a green double border. </div> <div class="example" id="border-image-border-shorthand-example"> <a class="self-link" href="#border-image-border-shorthand-example"></a> Notice that the <a class="property css" data-link-type="property" href="#propdef-border" id="ref-for-propdef-border⑧">border</a> shorthand resets <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image④">border-image</a>. This makes it easy to turn off or reset all border effects: <pre>.notebox { border: double orange; /* must set 'border' shorthand first, otherwise it erases 'border-image' */ border-image: url("border.png") 30 round; /* but other 'border' properties can be set after */ border-width: thin thick; } ... .sidebar .notebox { box-shadow: 0 0 5px gray; border-radius: 5px; border: none; /* turn off all borders */ /* 'border' shorthand resets 'border-image' */ } </pre> </div> <h3 class="heading settled" data-level="5.1" id="border-image-source">5.1. Image Source: the <a class="property css" data-link-type="property" href="#propdef-border-image-source" id="ref-for-propdef-border-image-source②">border-image-source</a> property<a class="self-link" href="#border-image-source"></a></h3> <table class="def propdef" data-link-for-hint="border-image-source"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-image-source">border-image-source</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⓪">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image②"><image></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements, except internal table elements when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse②">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-border-collapse-collapse" id="ref-for-valdef-border-collapse-collapse①">collapse</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword none or the computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image③"><image></a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> Specifies an image to use as a border in place of the rendering specified by the <a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style⑧">border-style</a> properties and, if given the <a class="css" data-link-type="maybe" href="#border-image-slice-fill" id="ref-for-border-image-slice-fill">fill</a> keyword in <a class="property css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice①">border-image-slice</a>, as an additional image backdrop for the element. If the value is none or if the image cannot be displayed (or the property doesn’t apply), the border styles will be used; otherwise the element’s border-style borders are not drawn and this <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="border-image-dfn">border image</dfn> is drawn as described in the sections below. <h3 class="heading settled" data-level="5.2" id="border-image-slice">5.2. Image Slicing: the <a class="property css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice②">border-image-slice</a> property<a class="self-link" href="#border-image-slice"></a></h3> <table class="def propdef" data-link-for-hint="border-image-slice"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-image-slice">border-image-slice</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value"><number [0,∞]></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④①">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value②"><percentage [0,∞]></a>]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑧">{1,4}</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all①">&&</a> fill<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>100% <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements, except internal table elements when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse③">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-border-collapse-collapse" id="ref-for-valdef-border-collapse-collapse②">collapse</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>refer to size of the border image <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>four values, each either a number or percentage; plus a <a class="css" data-link-type="maybe" href="#border-image-slice-fill" id="ref-for-border-image-slice-fill①">fill</a> keyword if specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value </table> This property specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded (treated as fully transparent) unless the <a class="css" data-link-type="maybe" href="#border-image-slice-fill" id="ref-for-border-image-slice-fill②">fill</a> keyword is present. (It is drawn over the background; see <a href="#border-image-process">Drawing the Border Image</a>.) If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-slice" data-dfn-type="value" data-export id="valdef-border-image-slice-percentage-0"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage [0,∞]></a></dfn> <dd> Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-slice" data-dfn-type="value" data-export id="valdef-border-image-slice-number-0"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①"><number [0,∞]></a></dfn> <dd> Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is a vector image). <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-slice" data-dfn-type="value" data-export id="border-image-slice-fill">fill</dfn> <dd> The <a class="css" data-link-type="maybe" href="#border-image-slice-fill" id="ref-for-border-image-slice-fill③">fill</a> keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.) </dl> Negative values are invalid. Computed values larger than the size of the image are interpreted as 100%. The regions given by the <a class="property css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice③">border-image-slice</a> values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty—which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values. If the image must be sized to determine the slices (for example, for SVG images with no <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-dimensions" id="ref-for-natural-dimensions">natural dimensions</a>), then it is sized using the <a href="https://www.w3.org/TR/css3-images/#default-sizing">default sizing algorithm</a> with no <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#specified-size" id="ref-for-specified-size">specified size</a> and the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area②">border image area</a> as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#default-object-size" id="ref-for-default-object-size">default object size</a>. <figure> <img alt="Diagram: two horizontal cuts and two vertical cuts through an image" height="304" src="images/slice.png" width="388"> <figcaption> Diagram illustrating the cuts corresponding to the value 25% 30% 12% 20% </figcaption> </figure> <h3 class="heading settled" data-level="5.3" id="border-image-width">5.3. Drawing Areas: the <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width②">border-image-width</a> property<a class="self-link" href="#border-image-width"></a></h3> <table class="def propdef" data-link-for-hint="border-image-width"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-image-width">border-image-width</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑧"><length-percentage [0,∞]></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④②">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value②"><number [0,∞]></a> | auto ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range⑨">{1,4}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>1 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements, except internal table elements when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse④">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-border-collapse-collapse" id="ref-for-valdef-border-collapse-collapse③">collapse</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>Relative to width/height of the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area③">border image area</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>four values, each either a number, the keyword <a class="css" data-link-type="maybe" href="#valdef-border-image-width-auto" id="ref-for-valdef-border-image-width-auto">auto</a>, or a computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑨"><length-percentage></a> value <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value </table> The <a data-link-type="dfn" href="#border-image-dfn" id="ref-for-border-image-dfn">border image</a> is drawn inside an area called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="border-image-area">border image area</dfn>. This is an area whose boundaries by default correspond to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box⑦">border box</a>, see <a class="property css" data-link-type="property" href="#propdef-border-image-outset" id="ref-for-propdef-border-image-outset">border-image-outset</a>. The four values of <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width③">border-image-width</a> specify offsets that are used to divide the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area④">border image area</a> into nine <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="region" data-lt="border image region" data-noexport id="border-image-region">regions</dfn>. The offsets represent inward distances from the top, right, bottom, and left sides of the area, respectively. If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-width" data-dfn-type="value" data-export id="valdef-border-image-width-length-percentage-0"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②⓪"><length-percentage [0,∞]></a></dfn> <dd> Percentages refer to the size of the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area⑤">border image area</a>: the width of the area for horizontal offsets, the height for vertical offsets. <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-width" data-dfn-type="value" data-export id="valdef-border-image-width-number-0"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value③"><number [0,∞]></a></dfn> <dd> Numbers represent multiples of the corresponding computed <a href="#border-width">border-width</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-width" data-dfn-type="value" data-export id="valdef-border-image-width-auto">auto</dfn> <dd> If <a class="css" data-link-type="maybe" href="#valdef-border-image-width-auto" id="ref-for-valdef-border-image-width-auto①">auto</a> is specified then the used <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width④">border-image-width</a> is the <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-size" id="ref-for-natural-size②">natural</a> width or height (whichever is applicable) of the corresponding image slice (see <a class="property css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice④">border-image-slice</a>). If the image does not have the required <a data-link-type="dfn" href="https://www.w3.org/TR/css-images-3/#natural-dimensions" id="ref-for-natural-dimensions①">natural dimension</a> then the corresponding computed <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width⑨">border-width</a> is used instead. </dl> Negative values are invalid for any <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width⑤">border-image-width</a> values. If two opposite <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width⑥">border-image-width</a> offsets are large enough that they overlap, then the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value④">used values</a> of all border-image-width offsets are proportionally reduced until they no longer overlap. In mathematical notation: Given <var>Lwidth</var> as the width of the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area⑥">border image area</a>, <var>Lheight</var> as its height, and <var>W<var>side</var></var> as the border-image-width offset for the <var>side</var> side, let <var>f</var> = min(<var>Lwidth</var>/(<var>Wleft</var>+<var>Wright</var>), <var>Lheight</var>/(<var>Wtop</var>+<var>Wbottom</var>)). If <var>f</var> < 1, then all <var>W</var> are reduced by multiplying them by <var>f</var>. <h3 class="heading settled" data-level="5.4" id="border-image-outset">5.4. Edge Overhang: the <a class="property css" data-link-type="property" href="#propdef-border-image-outset" id="ref-for-propdef-border-image-outset①">border-image-outset</a> property<a class="self-link" href="#border-image-outset"></a></h3> <table class="def propdef" data-link-for-hint="border-image-outset"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-image-outset">border-image-outset</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value②"><length [0,∞]></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④④">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value④"><number [0,∞]></a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range①⓪">{1,4}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements, except internal table elements when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse⑤">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-border-collapse-collapse" id="ref-for-valdef-border-collapse-collapse④">collapse</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>four values, each a number or absolute length <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value </table> The values specify the amount by which the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area⑦">border image area</a> extends beyond the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box⑧">border box</a>. If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively. <dl> <dt><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value③"><length [0,∞]></a> <dd> Represents an outset of the specified length. <dt><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value⑤"><number [0,∞]></a> <dd> Represents an outset of the specified multiple of the corresponding computed <a href="#border-width">border-width</a>. </dl> Negative values are invalid. Portions of the border-image that are rendered outside the <a data-link-type="dfn" href="https://www.w3.org/TR/css-box-4/#border-box" id="ref-for-border-box⑨">border box</a> do not trigger scrolling. Also such portions are invisible to mouse events and do not capture such events on behalf of the element. Note: Even though they never cause a scrolling mechanism, outset images may still be clipped by an ancestor or by the viewport. <h3 class="heading settled" data-level="5.5" id="border-image-repeat">5.5. Image Tiling: the <a class="property css" data-link-type="property" href="#propdef-border-image-repeat" id="ref-for-propdef-border-image-repeat">border-image-repeat</a> property<a class="self-link" href="#border-image-repeat"></a></h3> <table class="def propdef" data-link-for-hint="border-image-repeat"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-image-repeat">border-image-repeat</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ stretch <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑤">|</a> repeat | round | space ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range①①">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>stretch <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements, except internal table elements when <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse⑥">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-border-collapse-collapse" id="ref-for-valdef-border-collapse-collapse⑤">collapse</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>two keywords, one per axis <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> This property specifies how the images for the sides and the middle part of the <a data-link-type="dfn" href="#border-image-dfn" id="ref-for-border-image-dfn①">border image</a> are scaled and tiled. The first keyword applies to the horizontal scaling and tiling of the top, middle and bottom parts, the second to the vertical scaling and tiling of the left, middle and right parts; see <a href="#border-image-process">Drawing the Border Image</a>. If the second keyword is absent, it is assumed to be the same as the first. Values have the following meanings: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-repeat" data-dfn-type="value" data-export id="valdef-border-image-repeat-stretch">stretch</dfn> <dd> The image is stretched to fill its corresponding <a data-link-type="dfn" href="#border-image-region" id="ref-for-border-image-region">region</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-repeat" data-dfn-type="value" data-export id="valdef-border-image-repeat-repeat">repeat</dfn> <dd> The image is tiled (repeated) to fill its corresponding <a data-link-type="dfn" href="#border-image-region" id="ref-for-border-image-region①">region</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-repeat" data-dfn-type="value" data-export id="valdef-border-image-repeat-round">round</dfn> <dd> The image is tiled (repeated) to fill its corresponding <a data-link-type="dfn" href="#border-image-region" id="ref-for-border-image-region②">region</a>. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. <dt><dfn class="dfn-paneled css" data-dfn-for="border-image-repeat" data-dfn-type="value" data-export id="valdef-border-image-repeat-space">space</dfn> <dd> The image is tiled (repeated) to fill its corresponding <a data-link-type="dfn" href="#border-image-region" id="ref-for-border-image-region③">region</a>. If it does not fill the region with a whole number of tiles, the extra space is distributed around the tiles. </dl> The exact process for scaling and tiling the border-image parts is given in the section below. <h3 class="heading settled" data-level="5.6" id="border-image-process">5.6. Drawing the Border Image<a class="self-link" href="#border-image-process"></a></h3> After the <a data-link-type="dfn" href="#border-image-dfn" id="ref-for-border-image-dfn②">border image</a> given by <a class="property css" data-link-type="property" href="#propdef-border-image-source" id="ref-for-propdef-border-image-source③">border-image-source</a> is sliced by the <a class="property css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice⑤">border-image-slice</a> values, the resulting nine images are scaled, positioned, and tiled into their corresponding <a data-link-type="dfn" href="#border-image-region" id="ref-for-border-image-region④">border image regions</a> in four steps: <ol> <li> Scale to <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width⑨">border-image-width</a>. <ul> <li>The two images for the top and bottom edges are made as tall as the top and bottom <a data-link-type="dfn" href="#border-image-region" id="ref-for-border-image-region⑤">border image regions</a>, respectively, and their width is scaled proportionally. <li>The images for the left and right edges are made as wide as the left and right <a data-link-type="dfn" href="#border-image-region" id="ref-for-border-image-region⑥">border image regions</a>, respectively, and their height is scaled proportionally. <li>The corner images are scaled to be as wide and as tall as the their respective <a data-link-type="dfn" href="#border-image-region" id="ref-for-border-image-region⑦">border image regions</a>. <li>The middle image’s width is scaled by the same factor as the top image unless that factor is zero or infinity, in which case the scaling factor of the bottom is substituted, and failing that, the width is not scaled. The height of the middle image is scaled by the same factor as the left image unless that factor is zero or infinity, in which case the scaling factor of the right image is substituted, and failing that, the height is not scaled. </ul> <li> Scale to <a class="property css" data-link-type="property" href="#propdef-border-image-repeat" id="ref-for-propdef-border-image-repeat①">border-image-repeat</a>. <ul> <li>If the first keyword is <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-stretch" id="ref-for-valdef-border-image-repeat-stretch">stretch</a>, the top, middle and bottom images are further scaled to be as wide as the middle region of the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area⑧">border image area</a>. The height is not changed any further. <li>If the first keyword is <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-round" id="ref-for-valdef-border-image-repeat-round">round</a>, the top, middle and bottom images are resized in width, so that exactly a whole number of them fit in the middle region of the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area⑨">border image area</a>, exactly as for <a class="css" data-link-type="maybe" href="#valdef-background-repeat-round" id="ref-for-valdef-background-repeat-round③">round</a> in the <a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat⑥">background-repeat</a> property. <li>If the first keyword is <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-repeat" id="ref-for-valdef-border-image-repeat-repeat">repeat</a> or <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-space" id="ref-for-valdef-border-image-repeat-space">space</a>, the top, middle, and bottom images are not changed any further. <li>The effects of <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-stretch" id="ref-for-valdef-border-image-repeat-stretch①">stretch</a>, <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-round" id="ref-for-valdef-border-image-repeat-round①">round</a>, <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-repeat" id="ref-for-valdef-border-image-repeat-repeat①">repeat</a>, and <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-space" id="ref-for-valdef-border-image-repeat-space①">space</a> for the second keyword are analogous, acting on the height of the left, middle and right images. </ul> <li> Position the first tile. <ul> <li>If the first keyword is <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-repeat" id="ref-for-valdef-border-image-repeat-repeat②">repeat</a>, the top, middle, and bottom images are centered horizontally in their respective regions. Otherwise the images are placed at the left edge of their respective regions of the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area①⓪">border image area</a>. <li>If the second keyword is <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-repeat" id="ref-for-valdef-border-image-repeat-repeat③">repeat</a>, the left, middle, and right images are centered vertically in their respective regions. Otherwise the images are placed at the top edge of their respective regions of the <a data-link-type="dfn" href="#border-image-area" id="ref-for-border-image-area①①">border image area</a>. </ul> <li> Tile and draw. <ul> <li>The images are then tiled to fill their respective regions. <li>In the case of <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-space" id="ref-for-valdef-border-image-repeat-space②">space</a>, any partial tiles are discarded and the extra space distributed before, after, and between the tiles. (I.e. the gap before the first tile, the gap after the last tile, and the gaps between tiles are equalized.) This can result in empty border-image side regions. <li>The images are drawn at the same stacking level as normal borders: immediately in front of the background layers. <li>The middle image is not drawn unless <a class="css" data-link-type="maybe" href="#border-image-slice-fill" id="ref-for-border-image-slice-fill④">fill</a> was specified for <a class="property css" data-link-type="property" href="#propdef-border-image-source" id="ref-for-propdef-border-image-source④">border-image-source</a>. </ul> </ol> <h3 class="heading settled" data-level="5.7" id="border-image">5.7. Border Image Shorthand: the <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image⑤">border-image</a> property<a class="self-link" href="#border-image"></a></h3> <table class="def propdef" data-link-for-hint="border-image"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-border-image">border-image</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="#propdef-border-image-source" id="ref-for-propdef-border-image-source⑤"><'border-image-source'></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any①⑤">||</a> <a class="production css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice⑥"><'border-image-slice'></a> [ / <a class="production css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width①⓪"><'border-image-width'></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑧">|</a> / <'border-image-width'><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑦">?</a> / <a class="production css" data-link-type="property" href="#propdef-border-image-outset" id="ref-for-propdef-border-image-outset②"><'border-image-outset'></a> ]? || <a class="production css" data-link-type="property" href="#propdef-border-image-repeat" id="ref-for-propdef-border-image-repeat②"><'border-image-repeat'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>See individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>See individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>See individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>See individual properties </table> This is a shorthand property for setting <a class="property css" data-link-type="property" href="#propdef-border-image-source" id="ref-for-propdef-border-image-source⑥">border-image-source</a>, <a class="property css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice⑦">border-image-slice</a>, <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width①②">border-image-width</a>, <a class="property css" data-link-type="property" href="#propdef-border-image-outset" id="ref-for-propdef-border-image-outset③">border-image-outset</a>, and <a class="property css" data-link-type="property" href="#propdef-border-image-repeat" id="ref-for-propdef-border-image-repeat③">border-image-repeat</a> in a single declaration. Omitted values are set to their <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#initial-value" id="ref-for-initial-value⑤">initial values</a>. <h3 class="heading settled" data-level="5.8" id="border-image-tables">5.8. Effect on Tables<a class="self-link" href="#border-image-tables"></a></h3> The <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image⑥">border-image</a> properties apply to the border of tables and inline tables that have <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse⑦">border-collapse</a> set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-border-collapse-collapse" id="ref-for-valdef-border-collapse-collapse⑥">collapse</a>. However, this specification does not define how such an image border is rendered. In particular, it does not define how the image border interacts with the borders of cells, rows and row groups at the edges of the table (see <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#border-conflict-resolution">border conflict resolution</a> in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a>). It is expected that a future specification will define the rendering. It is recommended that UAs do not apply border images to tables with collapsed borders until then. <h2 class="heading settled" data-level="6" id="misc">6. Miscellaneous Effects<a class="self-link" href="#misc"></a></h2> Note: The <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break②">box-decoration-break</a> property, which defines how backgrounds and borders apply to a fragmented box, has been moved to the <a href="https://www.w3.org/TR/css-break/">CSS Fragmentation Module</a>. <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a> <h3 class="heading settled" data-level="6.1" id="box-shadow">6.1. Drop Shadows: the <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow③">box-shadow</a> property<a class="self-link" href="#box-shadow"></a></h3> <table class="def propdef" data-link-for-hint="box-shadow"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-box-shadow">box-shadow</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑨">|</a> <a class="production css" data-link-type="type" href="#typedef-shadow" id="ref-for-typedef-shadow"><shadow></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑧">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>either the keyword <a class="css" data-link-type="maybe" href="#box-shadow-none" id="ref-for-box-shadow-none">none</a> or a list, each item consisting of four absolute lengths plus a computed color and optionally also a <a class="css" data-link-type="maybe" href="#shadow-inset" id="ref-for-shadow-inset">inset</a> keyword <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value, treating <a class="css" data-link-type="maybe" href="#box-shadow-none" id="ref-for-box-shadow-none①">none</a> as a zero-item list and appending blank shadows (transparent 0 0 0 0) with a corresponding <a class="css" data-link-type="maybe" href="#shadow-inset" id="ref-for-shadow-inset①">inset</a> keyword as needed to match the longer list if the shorter list is otherwise compatible with the longer one </table> The <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow④">box-shadow</a> property attaches one or more drop shadows to the box. The property accepts either the <dfn class="dfn-paneled css" data-dfn-for="box-shadow" data-dfn-type="value" data-export id="box-shadow-none">none</dfn> value, which indicates no shadows, or a comma-separated list of shadows, ordered front to back. Each shadow is given as a <a class="production css" data-link-type="type" href="#typedef-shadow" id="ref-for-typedef-shadow①"><shadow></a>, represented by 2-4 length values, an optional color, and an optional <a class="css" data-link-type="maybe" href="#shadow-inset" id="ref-for-shadow-inset②">inset</a> keyword. Omitted lengths are 0; omitted colors default to currentColor. <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-shadow"><a class="production" data-link-type="type" href="#typedef-shadow" id="ref-for-typedef-shadow②"><shadow></a></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color⑤"><color></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑨">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all②">&&</a> [<a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value④"><length></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num" id="ref-for-mult-num">{2}</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑤"><length [0,∞]></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①⓪">?</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑥"><length></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①①">?</a>] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all③">&&</a> inset<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①②">?</a></pre> The components of each <a class="production css" data-link-type="type" href="#typedef-shadow" id="ref-for-typedef-shadow③"><shadow></a> are interpreted as follows: <dl> <dt><dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-noexport id="shadow-offset-x">1st <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑦"><length></a></dfn> <dd> Specifies the <dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-export id="box-shadow-horizontal-offset">horizontal offset</dfn> of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left. <dt><dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-noexport id="shadow-offset-y">2nd <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑧"><length></a></dfn> <dd> Specifies the <dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-export id="box-shadow-vertical-offset">vertical offset</dfn> of the shadow. A positive value offsets the shadow down, a negative one up. <dt><dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-noexport id="shadow-blur-radius">3rd <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑨"><length [0,∞]></a></dfn> <dd>Specifies the <dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-export id="box-shadow-blur-radius">blur radius</dfn>. Negative values are invalid. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred. See <a href="#shadow-blur">Shadow Blurring</a>, below. <dt><dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-noexport id="shadow-spread-distance">4th <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①⓪"><length></a></dfn> <dd> Specifies the <dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-export id="box-shadow-spread-distance">spread distance</dfn>. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract. See <a href="#shadow-shape">Shadow Shape</a>, below. Note that for inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow’s perimeter shape. <dt><dfn class="dfn-paneled css" data-dfn-for="box-shadow" data-dfn-type="value" data-noexport id="shadow-color"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color⑥"><color></a></dfn> <dd> Specifies the color of the shadow. If the color is absent, it defaults to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor">currentColor</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="box-shadow" data-dfn-type="value" data-noexport id="shadow-inset">inset</dfn> <dd> If present, the <a class="css" data-link-type="maybe" href="#shadow-inset" id="ref-for-shadow-inset③">inset</a> keyword changes the drop shadow from an <dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-export data-local-lt="outer shadow" id="box-shadow-outer-box-shadow">outer box-shadow</dfn> (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an <dfn class="dfn-paneled" data-dfn-for="box-shadow" data-dfn-type="dfn" data-export data-local-lt="inner shadow" id="box-shadow-inner-box-shadow">inner box-shadow</dfn> (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it). </dl> <div class="example" id="example-ad571670"> <a class="self-link" href="#example-ad571670"></a> The example below demonstrates the effects of spread and blur on the shadow: <pre>width: 100px; height: 100px; border: 12px solid blue; background-color: orange; border-top-left-radius: 60px 90px; border-bottom-right-radius: 60px 90px; box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4), 12px 12px 0px 8px rgba(0,0,0,0.4) inset; </pre> <figure> <img alt="The sample code above would create a 100px×100px orange box with a 12px blue border, whose top right / bottom left corners are sharp and tob left / bottom right corners are elliptically curved. Two shadows are created: an inner one, which due to its offset and spread creates a 20px-wide band of darker orange along the top and left sides of the box (curving to match the rounded top left border shape); and an outer one, creating a 204px×204px gray duplicate of the shape seemingly behind the box, offset 24px down and 24px to the right of the box's top and left edges. Applying the 12px blur radius to the outer shadow creates a gradual shift from the shadow color to transparent along its edges which is visibly apparent for 24px centered along the edge of the shadow." height="244" src="images/spread-blur.png" width="251"> </figure> </div> <h4 class="heading settled" data-level="6.1.1" id="shadow-shape">6.1.1. Shadow Shape, Spread, and Knockout<a class="self-link" href="#shadow-shape"></a></h4> An <a data-link-type="dfn" href="#box-shadow-outer-box-shadow" id="ref-for-box-shadow-outer-box-shadow">outer box-shadow</a> casts a shadow as if the border-box of the element were opaque. Assuming a spread distance of zero, its perimeter has the exact same size and shape as the border box. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element. An <a data-link-type="dfn" href="#box-shadow-inner-box-shadow" id="ref-for-box-shadow-inner-box-shadow">inner box-shadow</a> casts a shadow as if everything outside the padding edge were opaque. Assuming a spread distance of zero, its perimeter has the exact same size and shape as the padding box. The shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element. If a <a data-link-type="dfn" href="#box-shadow-spread-distance" id="ref-for-box-shadow-spread-distance">spread distance</a> is defined, the shadow perimeter defined above is expanded outward (for <a data-link-type="dfn" href="#box-shadow-outer-box-shadow" id="ref-for-box-shadow-outer-box-shadow①">outer box-shadows</a>) or contracted inward (for <a data-link-type="dfn" href="#box-shadow-inner-box-shadow" id="ref-for-box-shadow-inner-box-shadow①">inner box-shadows</a>) by outsetting (insetting, for inner shadows) the shadow’s straight edges by the spread distance (and flooring the resulting width/height at zero). <div class="example" id="example-96985467"> <a class="self-link" href="#example-96985467"></a> Below are some examples of an orange box with a blue border being given a drop shadow. <table class="data" id="box-shadow-samples"> <tbody> <tr> <th scope="rowgroup"> <pre><code>border:5px solid blue; background-color:orange; width: 144px; height: 144px; </code></pre> <th> <pre><code>border-radius: 20px;</code></pre> <th> <pre><code>border-radius: 0;</code></pre> <tr> <th> <pre><code>box-shadow: rgba(0,0,0,0.4) 10px 10px; </code></pre> <td> <img alt="A round-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box." height="175" src="images/shadow-outer-round.png" width="175"> <td> <img alt="A square-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box." height="175" src="images/shadow-outer-square.png" width="175"> <tr> <th> <pre><code>box-shadow: rgba(0,0,0,0.4) 10px 10px inset </code></pre> <td> <img alt="A round-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border)." height="175" src="images/shadow-inner-round.png" width="175"> <td> <img alt="A square-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border)." height="175" src="images/shadow-inner-square.png" width="175"> <tr> <th> <pre><code>box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ </code></pre> <td> <img alt="A round-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box." height="175" src="images/shadow-outer-spread-round.png" width="175"> <td> <img alt="A square-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box." height="175" src="images/shadow-outer-spread-square.png" width="175"> <tr> <th> <pre><code>box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ inset </code></pre> <td> <img alt="A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border)." height="175" src="images/shadow-inner-spread-round.png" width="175"> <td> <img alt="A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border)." height="175" src="images/shadow-inner-spread-square.png" width="175"> </table> </div> To preserve the box’s shape when spread is applied, the corner radii of the shadow are also increased (decreased, for inner shadows) from the border-box (padding-box) radii by adding (subtracting) the <a data-link-type="dfn" href="#box-shadow-spread-distance" id="ref-for-box-shadow-spread-distance②">spread distance</a> (and flooring at zero). However, in order to create a sharper corner when the border radius is small (and thus ensure continuity between round and sharp corners), when the <a data-link-type="dfn" href="#border-radii" id="ref-for-border-radii①">border radius</a> is less than the spread distance (or in the case of an inner shadow, less than the absolute value of a negative spread distance), the spread distance is first multiplied by the proportion 1 + (<var>r</var>-1)3, where <var>r</var> is the ratio of the border radius to the spread distance, in calculating the corner radii of the spread shadow shape. For example, if the border radius is 10px and the spread distance is 20px (<var>r</var> = .5), the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)3) = 27.5px rather than 30px. This adjustment is applied independently to the radii in each dimension. The <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image⑦">border-image</a> does not affect the shape of the box-shadow. <h4 class="heading settled" data-level="6.1.2" id="shadow-blur">6.1.2. Blurring Shadow Edges<a class="self-link" href="#shadow-blur"></a></h4> A non-zero <a data-link-type="dfn" href="#box-shadow-blur-radius" id="ref-for-box-shadow-blur-radius">blur radius</a> indicates that the resulting shadow should be blurred, such as by a Gaussian filter. The exact algorithm is not defined; however the resulting shadow must approximate (with each pixel being within 5% of its expected value) the image that would be generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius. Note: This means for a long, straight shadow edge, the blur radius will create a visibly apparent color transition approximately the twice length of the blur radius that is perpendicular to and centered on the shadow’s edge, and that ranges from almost the full shadow color at the endpoint inside the shadow to almost fully transparent at the endpoint outside it. <h4 class="heading settled" data-level="6.1.3" id="shadow-layers">6.1.3. Layering, Layout, and Other Details<a class="self-link" href="#shadow-layers"></a></h4> The shadow effects are applied front-to-back: the first shadow is on top and the others are layered behind. Shadows do not influence layout and may overlap (or be overlapped by) other boxes and text or their shadows. In terms of stacking contexts and the painting order, the <a data-link-type="dfn" href="#box-shadow-outer-box-shadow" id="ref-for-box-shadow-outer-box-shadow②">outer box-shadows</a> of an element are drawn immediately below the background of that element, and the <a data-link-type="dfn" href="#box-shadow-inner-box-shadow" id="ref-for-box-shadow-inner-box-shadow②">inner shadows</a> of an element are drawn immediately above the background of that element (below the borders and border image, if any). Unless otherwise specified, drop shadows are only applied to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#principal-box" id="ref-for-principal-box">principal box</a>. If the affected box has multiple fragments, the shadows are applied as specified in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break③">box-decoration-break</a>. Shadows do not trigger scrolling or increase the size of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region②">scrollable overflow area</a>. Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model that has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined <h2 class="heading settled" data-level="7" id="levels">7. Levels<a class="self-link" href="#levels"></a></h2> This section is informative. CSS has different levels of features, each a subset of the other. (See <a data-link-type="biblio" href="#biblio-css-2017" title="CSS Snapshot 2017">[CSS-2017]</a> for a full explanation.) The lists below describe which features from this specification are in each level. <h3 class="heading settled" data-level="7.1" id="level-1">7.1. Level 1<a class="self-link" href="#level-1"></a></h3> <ul> <li><a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color⑧">background-color</a> <li><a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image⑦">background-image</a> only one image (no layers) <li><a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat⑦">background-repeat</a>: only <a class="css" data-link-type="maybe" href="#valdef-background-repeat-repeat" id="ref-for-valdef-background-repeat-repeat①">repeat</a> | <a class="css" data-link-type="maybe" href="#valdef-background-repeat-repeat-x" id="ref-for-valdef-background-repeat-repeat-x">repeat-x</a> | <a class="css" data-link-type="maybe" href="#valdef-background-repeat-repeat-y" id="ref-for-valdef-background-repeat-repeat-y①">repeat-y</a> | <a class="css" data-link-type="maybe" href="#valdef-background-repeat-no-repeat" id="ref-for-valdef-background-repeat-no-repeat②">no-repeat</a> <li><a class="property css" data-link-type="property" href="#propdef-background-attachment" id="ref-for-propdef-background-attachment④">background-attachment</a>: only <a class="css" data-link-type="maybe" href="#valdef-background-attachment-scroll" id="ref-for-valdef-background-attachment-scroll①">scroll</a> | <a class="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed⑥">fixed</a> <li><a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position①⓪">background-position</a>: only one or two values allowed <li><a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background③">background</a> shorthand: only color, image, repeat, attachment and position <li><a class="property css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color⑦">border-color</a> properties <li><a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style①⓪">border-style</a> properties <li><a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width①⓪">border-width</a> properties <li><a class="property css" data-link-type="property" href="#propdef-border-top" id="ref-for-propdef-border-top">border-top</a>, <a class="property css" data-link-type="property" href="#propdef-border-bottom" id="ref-for-propdef-border-bottom">border-bottom</a>, <a class="property css" data-link-type="property" href="#propdef-border-right" id="ref-for-propdef-border-right">border-right</a>, <a class="property css" data-link-type="property" href="#propdef-border-left" id="ref-for-propdef-border-left③">border-left</a>, and <a class="property css" data-link-type="property" href="#propdef-border" id="ref-for-propdef-border⑨">border</a> shorthands </ul> <h3 class="heading settled" data-level="7.2" id="level-2">7.2. Level 2<a class="self-link" href="#level-2"></a></h3> <ul> <li><a class="property css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color⑨">background-color</a> <li><a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image⑧">background-image</a>: only one image (no layers) <li><a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat⑧">background-repeat</a>: only <a class="css" data-link-type="maybe" href="#valdef-background-repeat-repeat" id="ref-for-valdef-background-repeat-repeat②">repeat</a> | <a class="css" data-link-type="maybe" href="#valdef-background-repeat-repeat-x" id="ref-for-valdef-background-repeat-repeat-x①">repeat-x</a> | <a class="css" data-link-type="maybe" href="#valdef-background-repeat-repeat-y" id="ref-for-valdef-background-repeat-repeat-y②">repeat-y</a> | <a class="css" data-link-type="maybe" href="#valdef-background-repeat-no-repeat" id="ref-for-valdef-background-repeat-no-repeat③">no-repeat</a> <li><a class="property css" data-link-type="property" href="#propdef-background-attachment" id="ref-for-propdef-background-attachment⑤">background-attachment</a>: only <a class="css" data-link-type="maybe" href="#valdef-background-attachment-scroll" id="ref-for-valdef-background-attachment-scroll②">scroll</a> | <a class="css" data-link-type="maybe" href="#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed⑦">fixed</a> <li><a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position①①">background-position</a>: only one or two values allowed <li><a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background④">background</a>: only color, image, repeat, attachment and position <li><a class="property css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color⑧">border-color</a> properties <li><a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style①①">border-style</a> properties <li><a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width①①">border-width</a> properties <li><a class="property css" data-link-type="property" href="#propdef-border-top" id="ref-for-propdef-border-top①">border-top</a>, <a class="property css" data-link-type="property" href="#propdef-border-bottom" id="ref-for-propdef-border-bottom①">border-bottom</a>, <a class="property css" data-link-type="property" href="#propdef-border-right" id="ref-for-propdef-border-right①">border-right</a>, <a class="property css" data-link-type="property" href="#propdef-border-left" id="ref-for-propdef-border-left④">border-left</a>, and <a class="property css" data-link-type="property" href="#propdef-border" id="ref-for-propdef-border①⓪">border</a> shorthands </ul> <h3 class="heading settled" data-level="7.3" id="level-3">7.3. Level 3<a class="self-link" href="#level-3"></a></h3> <ul> <li>All features described in the CSS Backgrounds and Borders Module Level 3 </ul> <h2 class="heading settled" data-level="8" id="changes">8. Changes<a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" data-level="8.1" id="changes-2023-02">8.1. Changes since the 14 February 2023 Candidate Recommendation Snapshot<a class="self-link" href="#changes-2023-02"></a></h3> <ul> <li>Defined serialization of <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position①②">background-position</a> in <a href="#bg-position-serialization">§ 2.6.1 Serialization of background-position values</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/2274">Issue 2274</a>) <li>Reverted <a href="#bg-color-move">change moving <color> to the front of <final-bg-layer></a> in the <a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background⑤">background</a> shorthand. (<a href="https://github.com/w3c/csswg-drafts/issues/8496">Issue 8496</a>) <li>Specified <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#snap-a-length-as-a-border-width" id="ref-for-snap-a-length-as-a-border-width①">rounding of border widths</a> to device pixels. (<a href="https://github.com/w3c/csswg-drafts/issues/7434">Issue 7434</a>) <li>Specified interaction of <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius⑧">border-radius</a> and per-axis <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow" id="ref-for-propdef-overflow②">overflow</a> longhands. (<a href="https://github.com/w3c/csswg-drafts/issues/5210">Issue 5210</a>) <li>Fixed an error in the Computed Value line of <a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image⑨">background-image</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/8604">Issue 8604</a>) <li>Removed the <box> definition (replacing it with a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-visual-box" id="ref-for-typedef-visual-box⑦"><visual-box></a> reference), as the Box Module now defines these terms. <li>Aligned property definition tables with the latest expectations to include “Animation Type” and “Logical Property Group”. <li>Streamlined property grammar definitions using the latest <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-value-definition-syntax" id="ref-for-css-value-definition-syntax">value definition syntax</a>. <li>Fixed the definition for where box shadows apply. (<a href="https://github.com/w3c/csswg-drafts/issues/9286">Issue 9286</a>) </ul> <h3 class="heading settled" data-level="8.2" id="changes-2020-12">8.2. Changes since the 22 December 2020 Candidate Recommendation Snapshot<a class="self-link" href="#changes-2020-12"></a></h3> <ul> <li>Clarified that the rule about not propagating backgrounds from the root when it doesn’t generate boxes only applies to <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display" id="ref-for-propdef-display①">display: none</a>, not display: contents. (<a href="https://github.com/w3c/csswg-drafts/issues/3779">Issue 3779</a>) <li>Precisely defined the size of <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width①②">border-width</a> <a class="css" data-link-type="maybe" href="#valdef-line-width-thin" id="ref-for-valdef-line-width-thin">thin</a>, <a class="css" data-link-type="maybe" href="#valdef-line-width-medium" id="ref-for-valdef-line-width-medium①">medium</a>, and <a class="css" data-link-type="maybe" href="#valdef-line-width-thick" id="ref-for-valdef-line-width-thick">thick</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/7254">Issue 7254</a>) <li>Minor editorial improvements. </ul> <h3 class="heading settled" data-level="8.3" id="changes-2017-10">8.3. Changes since the 17 October 2017 Candidate Recommendation<a class="self-link" href="#changes-2017-10"></a></h3> <ul> <li> Inverted order of <a class="production css" data-link-type="type" href="#typedef-shadow" id="ref-for-typedef-shadow④"><shadow></a> grammar to match browser serialization and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow" id="ref-for-propdef-text-shadow">text-shadow</a>/<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/filter-effects-1/#funcdef-filter-drop-shadow" id="ref-for-funcdef-filter-drop-shadow">drop-shadow()</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/2305">Issue 2305</a>) <blockquote> <pre><a class="production" data-link-type="type" href="#typedef-shadow" id="ref-for-typedef-shadow⑤"><shadow></a> = <del>inset</del><ins><a class="production" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color⑦"><color></a></ins>? && <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①①"><length></a>{2,4} && <del><a class="production" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color⑧"><color></a></del><ins>inset</ins>?</pre> </blockquote> <li> Spread radius adjustment is only applied to shadows and margins where the radius of curvature grows, rather than shrinks. (<a href="https://github.com/w3c/csswg-drafts/issues/1900">Issue 1900</a>) <blockquote> To preserve the box’s shape when spread is applied, the corner radii of the shadow are also increased (decreased, for inner shadows) from the border-box radii by adding (subtracting) the <a data-link-type="dfn" href="#box-shadow-spread-distance" id="ref-for-box-shadow-spread-distance⑧">spread distance</a> (and flooring at zero). However, in order to create a sharper corner when the border radius is small <ins>(and thus ensure continuity between round and sharp corners)</ins> , when the <a data-link-type="dfn" href="#border-radii" id="ref-for-border-radii②">border radius</a> is less than the spread distance <ins>(or in the case of an inner shadow, less than the absolute value of a negative <a data-link-type="dfn" href="#box-shadow-spread-distance" id="ref-for-box-shadow-spread-distance①⓪">spread distance</a>)</ins> , the spread distance is multiplied by the proportion 1 + (<var>r</var>-1)3, where <var>r</var> is the ratio of the border radius to the spread distance, in calculating the corner radii of the spread shadow shape. </blockquote> <li> Clarified that an omitted <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color⑨"><color></a> in a <a class="production css" data-link-type="type" href="#typedef-shadow" id="ref-for-typedef-shadow⑥"><shadow></a> defaults to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①">currentColor</a>, not some mysterious unnamed value with the same behavior. (<a href="https://github.com/w3c/csswg-drafts/issues/2766">2766</a>) <blockquote> If the color is absent, <ins>it defaults to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor②">currentColor</a></ins> <del>the used color is taken from the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color②">color</a> property.</del> </blockquote> <li> Cleaned up and regularized “Animation type” and “Computed value” lines in the property definition tables. <li> Changed syntax to use the new <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-bracketed-range-notation" id="ref-for-css-bracketed-range-notation">CSS bracketed range notation</a> to reflect the prose restrictions on negative values, and corrected a few grammar definition errors introduced in the previous publication. <li> Minor editorial improvements. </ul> <h3 class="heading settled" data-level="8.4" id="changes-2014-09">8.4. Changes since the 9 September 2014 Candidate Recommendation<a class="self-link" href="#changes-2014-09"></a></h3> The following (non-trivial) changes were made to this specification since the <a href="https://www.w3.org/TR/2014/CR-css3-background-20140909/">9 September 2014 Candidate Recommendation</a>: <ul> <li>Added missing definition of <a class="css" data-link-type="propdesc" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow⑤">box-shadow: none</a>. (Apparently this was obvious enough that nobody noticed it was missing until now.) <li id="bg-color-move"><a class="self-link" href="#bg-color-move"></a>Moved <a class="production css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color①⓪"><'background-color'></a> component of <a class="production css" data-link-type="type" href="#typedef-final-bg-layer" id="ref-for-typedef-final-bg-layer②"><final-bg-layer></a> to the front for serialization because some authors seem to expect this even though it makes less sense? <li>Dropped effect of <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius⑨">border-radius</a> from collapsed-borders tables. <li>Renamed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#typedef-position" id="ref-for-typedef-position②"><position></a> back to <a class="production css" data-link-type="type" href="#typedef-bg-position" id="ref-for-typedef-bg-position⑥"><bg-position></a> since other properties will be eliding the three-value syntax. </ul> <h3 class="heading settled" data-level="8.5" id="changes-2014-02">8.5. Changes since the 4 February 2014 Last Call Working Draft<a class="self-link" href="#changes-2014-02"></a></h3> The following (non-trivial) changes were made to this specification since the <a href="https://www.w3.org/TR/2014/WD-css3-background-20140204/">4 February 2014 Last Call Working Draft</a>: <ul> <li>Fixed spread radius and margin radius calculations to only apply adjustment factor when spread/margin is larger than border radius. <li>Defined handling of canvas background when root element has <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display" id="ref-for-propdef-display③">display: none</a>. </ul> A full <a href="https://drafts.csswg.org/css-backgrounds-3/issues-lc-2014">Disposition of Comments</a> is available. <h3 class="heading settled" data-level="8.6" id="changes-2012-07">8.6. Changes since the 24 July 2012 Candidate Recommendation<a class="self-link" href="#changes-2012-07"></a></h3> The following (non-trivial) changes were made to this specification since the <a href="https://www.w3.org/TR/2012/CR-css3-background-20120724/">24 July 2012 Candidate Recommendation</a>: <ul> <li>Allow <a class="production css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip①⓪"><'background-clip'></a> and <a class="production css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin⑦"><'background-origin'></a> to be separated by other component values in the <a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background⑥">background</a> shorthand, since this is what is implemented. <li>Allow <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color①⓪"><color></a> and <a class="css" data-link-type="maybe" href="#shadow-inset" id="ref-for-shadow-inset④">inset</a> to be interleaved in any order in <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow⑥">box-shadow</a>, since they are not ambiguous and CSS generally allows variant ordering where not ambiguous. <li>Define gradually increasing corner radius formula for <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow⑦">box-shadow</a> spread curvature to create continuity between sharp corners (<a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius①⓪">border-radius</a> = 0) and curved corners (border-radius > <var>spread distance</var>). This also gives better results for all intermediate states. <li>Add definition for how the margin edge is curved in response to border-radius. (This is relevant for <a data-link-type="biblio" href="#biblio-css-shapes" title="CSS Shapes Module Level 1">[CSS-SHAPES]</a>, but does not change conformance to CSS Backgrounds and Borders Level 3.) <li>Removed <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break④">box-decoration-break</a>; it is now part of <a data-link-type="biblio" href="#biblio-css-break-3" title="CSS Fragmentation Module Level 3">[CSS-BREAK-3]</a>. <li>Tighten up the definition of spread for <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow⑧">box-shadow</a>. <li>Clarify that a <a class="property css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style①②">border-style</a> of <a class="css" data-link-type="maybe" href="#valdef-line-style-none" id="ref-for-valdef-line-style-none③">none</a> also implies an initial <a class="property css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width①③">border-image-width</a> of zero (since border-image-width is initially set to the computed <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width①③">border-width</a>, which in this case is zero). <li>Clarified how <a class="css" data-link-type="propdesc" href="#propdef-background-attachment" id="ref-for-propdef-background-attachment⑥">background-attachment: local</a> is affected by scrolling. <li>Simplified computed value of <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position①③">background-position</a> to clarify that all background-position values are interpolable. <li>Added “Animation Type” values to each property definition table. </ul> <h3 class="heading settled" data-level="8.7" id="changes-2012-04">8.7. Changes since the 17 April 2012 Candidate Recommendation<a class="self-link" href="#changes-2012-04"></a></h3> The following (non-editorial) changes were made to this specification since the <a href="https://www.w3.org/TR/2012/CR-css3-background-20120417/">17 April 2012 Candidate Recommendation</a>: <ul> <li>Fix error in computed value of <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position①⑤">background-position</a>: the computed value is a list of positions. <li>Add a note pointing out that when <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius①②">border-radius</a> reduces the interactive area, the width/height of the box might need to be increased. </ul> <h3 class="heading settled" data-level="8.8" id="changes-2012LC">8.8. Changes since the 14 February 2012 “Last Call” Working Draft<a class="self-link" href="#changes-2012LC"></a></h3> The following (non-editorial) changes were made to this specification since the <a href="https://www.w3.org/TR/2012/WD-css3-background-20120214/">14 February 2012 “Last Call” Working Draft</a>: These changes were in response to comments received during the review period. For details, see the full <a href="https://drafts.csswg.org/css-backgrounds-3/issues-lc-2012">Disposition of Comments.</a> <ul> <li><a href="#placement">Section 2.1</a>: Defined which properties from this module apply to the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-3/#sel-first-line" id="ref-for-sel-first-line⑤">::first-line</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-3/#first-letter0" id="ref-for-first-letter0①">::first-letter</a> pseudo-elements. <li><a href="#background-repeat">Section 3.4</a>: Fixed the incorrect definition of the computed value of <a class="property css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat⑨">background-repeat</a>. The value is always a pair of keywords, never a single keyword. <li><a href="#background-image">Section 3.10</a>: Added the missing <a class="property css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image①⓪">background-image</a> to the list of properties that the <a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background⑦">background</a> property reset. <li><a href="#border-width">Section 4.3</a>: Added that negative lengths are invalid on <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width①④">border-width</a>. <li><a href="#border-radius">Section 5.1</a>: Added that negative lengths are invalid on <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius①③">border-radius</a>. <li><a href="#border-image-tables">Section 6.8</a>: Added a section about the effect of <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image⑧">border-image</a> on tables with collapsed borders and added that the rendering will be defined later. </ul> <h3 class="heading settled" data-level="8.9" id="changes-2011">8.9. Changes Since the 15 February 2011 Candidate Recommendation<a class="self-link" href="#changes-2011"></a></h3> The following changes were made to this specification since the <a href="https://www.w3.org/TR/2011/CR-css3-background-20110215/">15 February 2011 Candidate Recommendation</a>: <ul> <li> <a href="#background-size">Section 3.9</a>: Defined what happens if <a class="property css" data-link-type="property" href="#propdef-background-size" id="ref-for-propdef-background-size⑥">background-size</a> has two <a class="css" data-link-type="maybe" href="#valdef-background-size-auto" id="ref-for-valdef-background-size-auto⑤">auto</a> values and the image is missing a natural size. <blockquote> If both values are <a class="css" data-link-type="maybe" href="#valdef-background-size-auto" id="ref-for-valdef-background-size-auto⑥">auto</a> then the natural width and/or height of the image should be used, if any <ins>, the missing dimension (if any) behaving as ‘auto’ as described above</ins> . </blockquote> <li> <a href="#corner-transitions">Section 5.4</a>: Made center of <a href="#corner-transitions">color and style transitions</a> undefined (within certain limits) on corner joins, since previous definition was wrong. <blockquote> <del>The center of color and style transitions between adjoining borders is at the point on the curve that is at an angle that is proportional to the ratio of the border widths. For example, if the top and right border widths are equal, that point is at a 45° angle from the horizontal, and if the top is twice the width of the right the point is at a 30° angle from the horizontal. The line demarcating this transition is drawn between the point at that angle on the outer arc and the point at that angle on the inner arc.</del> <ins>If one of these borders is zero-width, then the other border takes up the entire transitional area. Otherwise, the center of color and style transitions between adjoining borders must be proportional to the ratio of the border widths such that a function of its location is continuous with respect to this ratio. However it is not defined what these transitions look like or how “proportional” maps to a point on the curve.</ins> </blockquote> <li> <a href="#border-image-slice">Section 6.2</a>: Defined <a href="#border-image-slice">slicing of border images</a> that must be sized first to determine slice positions. Added: <blockquote> <ins>If the image must be sized to determine the slices (for example, for SVG images with no natural size), then it is sized as for an auto-sized background, using the border image area as the default object size in place of the background positioning area.</ins> </blockquote> <li> <a href="#misc">Section 7.1</a> Optionally added bidi-imposed breaks to the types of breaks affected by <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break⑤">box-decoration-break</a>. Added: <blockquote> <ins>UAs may also apply ‘box-decoration-break’ to control rendering at bidi-imposed breaks, i.e. when bidi reordering causes an inline to split into non-contiguous fragments. Otherwise such breaks are always handled as ‘slice’.</ins> </blockquote> <li> <a href="#box-shadow">Section 7.2</a>: Defined the default color of <a class="property css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow⑨">box-shadow</a>. <blockquote> The color is the color of the shadow. <ins>If the color is absent, the used color is taken from the ‘color’ property.</ins> </blockquote> <li> <a href="#background-position">Section 3.6</a>: Clarified computed value of <a class="property css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position①⑥">background-position</a>. <blockquote> <del>If one or two values are specified, for a <length> the absolute length, otherwise a percentage. If three or four values are specified, two pairs of a keyword plus a length or percentage.</del> <ins>Two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①②"><length></a>), otherwise as a percentage.</ins> </blockquote> Changed <del>Equivalent</del> to <ins>Computes</ins> in definition of keywords. <li>Added "Animation Type" line to property definition tables. <li> <a href="#background-position">Section 3.6</a>: Renamed <bg-position> production to <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-3/#typedef-position" id="ref-for-typedef-position③"><position></a> for easier re-use in other specifications and recast the grammar to be more verbose but easier to understand. <blockquote> <pre class="prod"><del>bg-position</del><ins><position></ins> = [ [ <ins>left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⓪">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤①">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤②">|</a></ins> top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤③">|</a> bottom <ins><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤④">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②①"><length-percentage></a></ins> ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑤">|</a> [ left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑥">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑦">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑧">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②②"><length-percentage></a> ] [ top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑨">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⓪">|</a> bottom <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥①">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②③"><length-percentage></a> ]<del><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①③">?</a></del> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥②">|</a> [ center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥③">|</a> [ left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥④">|</a> right ] <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②④"><length-percentage></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①④">?</a> ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all④">&&</a> [ center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⑤">|</a> [ top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⑥">|</a> bottom ] <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②⑤"><length-percentage></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①⑤">?</a> ] ] </pre> </blockquote> <li> <a href="#border-image-repeat">Section 6.5</a>: Added <a class="css" data-link-type="maybe" href="#valdef-border-image-repeat-space" id="ref-for-valdef-border-image-repeat-space③">space</a> keyword to <a class="property css" data-link-type="property" href="#propdef-border-image-repeat" id="ref-for-propdef-border-image-repeat④">border-image-repeat</a> property value table: it was included in the list of allowable values, but not in the syntax definition. <blockquote> [ stretch | repeat | round <ins>| space</ins> ]{1,2} </blockquote> <li> <a href="#corner-overlap">Section 5.5</a>: Corrected math error in border-radius example. <blockquote> The height (2.5em) is enough for the specified radii (0.5em plus <del>2.5em</del> <ins>2.0em</ins> ). </blockquote> <li><a href="#border-width">Section 4.3</a>: Marked Percentages field as N/A for <a class="property css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width①⑤">border-width</a>, since they are not included in the property. </ul> <h3 class="heading settled" data-level="8.10" id="changes-2009">8.10. Changes Since the 17 December 2009 Candidate Recommendation<a class="self-link" href="#changes-2009"></a></h3> The following changes were made to this specification since the <a href="https://www.w3.org/TR/2009/CR-css3-background-20091217/">17 December 2009 Candidate Recommendation</a>: <ul> <li>Addition of <a class="css" data-link-type="maybe" href="#valdef-background-clip-content-box" id="ref-for-valdef-background-clip-content-box">content-box</a> value of <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip①①">background-clip</a>. <li>Change to the <a class="property css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background⑧">background</a> shorthand syntax for <a class="property css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip①②">background-clip</a> and <a class="property css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin⑧">background-origin</a>. <li>Removal of recommendation to use gradients for color transitions when <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius①④">border-radius</a> produces a curve. <li>(Re)Addition of box-shadow property. <li>Various clarifications. </ul> <h2 class="heading settled" data-level="9" id="acknowledgments">9. Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> Tapas Roy was editor of the Border Module, before it was merged with the Background Module. Thanks to Ben Stucki for defining what happens with rounded corners if the two adjoining borders are of unequal thickness or one of them is zero; to Arjan Eising and Anne van Kesteren for the <a class="property css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius①⑤">border-radius</a> syntax; to Zack Weinberg for the corner transition regions diagram; and to Lea Verou, plinss, and dbaron for the corner radius adjustment formula (with special thanks to Lea for the live demo). A set of properties for border images was initially proposed by fantasai. The current simplification (one image cut into nine parts) is due to Ian Hickson. (Though the original idea seems to originate with some anonymous Microsoft engineers.) Finally, special thanks go to Brad Kemper for his feedback and suggestions for many of the features in the draft, for drawing all the box-shadow examples, and for proposing some <a href="http://www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html">radical changes</a> to the <a class="property css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image⑨">border-image</a> property that solved a number of problems with the earlier definition. <h2 class="heading settled" data-level="10" id="privacy">10. Privacy Considerations<a class="self-link" href="#privacy"></a></h2> This specification introduces no new privacy considerations. <h2 class="heading settled" data-level="11" id="security">11. Security Considerations<a class="self-link" href="#security"></a></h2> This specification introduces no new security considerations. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="https://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="https://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="https://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="https://www.w3.org/Style/CSS/Test/">https://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="https://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <h3 class="no-ref heading settled" id="w3c-cr-exit-criteria"> CR exit criteria<a class="self-link" href="#w3c-cr-exit-criteria"></a></h3> For this specification to be advanced to Proposed Recommendation, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms: <dl> <dt>independent <dd>each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement. <dt>interoperable <dd>passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review. <dt>implementation <dd> a user agent which: <ol class="inline"> <li>implements the specification. <li>is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or "nightly build"). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability. <li>is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward). </ol> </dl> The specification will remain Candidate Recommendation for at least six months. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#shadow-offset-x">1st <length></a>, in § 6.1 <li><a href="#shadow-offset-y">2nd <length></a>, in § 6.1 <li><a href="#shadow-blur-radius">3rd <length [0,∞]></a>, in § 6.1 <li><a href="#shadow-spread-distance">4th <length></a>, in § 6.1 <li><a href="#typedef-attachment"><attachment></a>, in § 2.5 <li> auto <ul> <li><a href="#valdef-background-size-auto">value for background-size</a>, in § 2.9 <li><a href="#valdef-border-image-width-auto">value for border-image-width</a>, in § 5.3 </ul> <li><a href="#propdef-background">background</a>, in § 2.10 <li><a href="#propdef-background-attachment">background-attachment</a>, in § 2.5 <li><a href="#propdef-background-clip">background-clip</a>, in § 2.7 <li><a href="#background-color-layer">background color</a>, in § 2.2 <li><a href="#propdef-background-color">background-color</a>, in § 2.2 <li><a href="#background-images">background image</a>, in § 2.3 <li><a href="#propdef-background-image">background-image</a>, in § 2.3 <li><a href="#background-image-layer">background image layer</a>, in § 2.1 <li><a href="#propdef-background-origin">background-origin</a>, in § 2.8 <li><a href="#background-painting-area">background painting area</a>, in § 2.7 <li><a href="#propdef-background-position">background-position</a>, in § 2.6 <li><a href="#background-positioning-area">background positioning area</a>, in § 2.8 <li><a href="#propdef-background-repeat">background-repeat</a>, in § 2.4 <li><a href="#propdef-background-size">background-size</a>, in § 2.9 <li><a href="#typedef-bg-image"><bg-image></a>, in § 2.3 <li><a href="#typedef-bg-layer"><bg-layer></a>, in § 2.10 <li><a href="#typedef-bg-position"><bg-position></a>, in § 2.6 <li><a href="#typedef-bg-size"><bg-size></a>, in § 2.9 <li><a href="#box-shadow-blur-radius">blur radius</a>, in § 6.1 <li><a href="#propdef-border">border</a>, in § 3.4 <li><a href="#propdef-border-bottom">border-bottom</a>, in § 3.4 <li><a href="#propdef-border-bottom-color">border-bottom-color</a>, in § 3.1 <li><a href="#propdef-border-bottom-left-radius">border-bottom-left-radius</a>, in § 4.1 <li><a href="#propdef-border-bottom-right-radius">border-bottom-right-radius</a>, in § 4.1 <li><a href="#propdef-border-bottom-style">border-bottom-style</a>, in § 3.2 <li><a href="#propdef-border-bottom-width">border-bottom-width</a>, in § 3.3 <li> border-box <ul> <li><a href="#valdef-background-clip-border-box">value for background-clip</a>, in § 2.7 <li><a href="#valdef-background-origin-border-box">value for background-origin</a>, in § 2.8 </ul> <li><a href="#border-color-dfn">border color</a>, in § 3.1 <li><a href="#propdef-border-color">border-color</a>, in § 3.1 <li><a href="#border-image-dfn">border image</a>, in § 5.1 <li><a href="#propdef-border-image">border-image</a>, in § 5.7 <li><a href="#border-image-area">border image area</a>, in § 5.3 <li><a href="#propdef-border-image-outset">border-image-outset</a>, in § 5.4 <li><a href="#border-image-region">border image region</a>, in § 5.3 <li><a href="#propdef-border-image-repeat">border-image-repeat</a>, in § 5.5 <li><a href="#propdef-border-image-slice">border-image-slice</a>, in § 5.2 <li><a href="#propdef-border-image-source">border-image-source</a>, in § 5.1 <li><a href="#propdef-border-image-width">border-image-width</a>, in § 5.3 <li><a href="#propdef-border-left">border-left</a>, in § 3.4 <li><a href="#propdef-border-left-color">border-left-color</a>, in § 3.1 <li><a href="#propdef-border-left-style">border-left-style</a>, in § 3.2 <li><a href="#propdef-border-left-width">border-left-width</a>, in § 3.3 <li><a href="#border-radii">border radius</a>, in § 4.1 <li><a href="#propdef-border-radius">border-radius</a>, in § 4.1 <li><a href="#propdef-border-right">border-right</a>, in § 3.4 <li><a href="#propdef-border-right-color">border-right-color</a>, in § 3.1 <li><a href="#propdef-border-right-style">border-right-style</a>, in § 3.2 <li><a href="#propdef-border-right-width">border-right-width</a>, in § 3.3 <li><a href="#border-style-dfn">border style</a>, in § 3.2 <li><a href="#propdef-border-style">border-style</a>, in § 3.2 <li><a href="#propdef-border-top">border-top</a>, in § 3.4 <li><a href="#propdef-border-top-color">border-top-color</a>, in § 3.1 <li><a href="#propdef-border-top-left-radius">border-top-left-radius</a>, in § 4.1 <li><a href="#propdef-border-top-right-radius">border-top-right-radius</a>, in § 4.1 <li><a href="#propdef-border-top-style">border-top-style</a>, in § 3.2 <li><a href="#propdef-border-top-width">border-top-width</a>, in § 3.3 <li><a href="#border-width-dfn">border width</a>, in § 3.3 <li><a href="#propdef-border-width">border-width</a>, in § 3.3 <li><a href="#valdef-background-position-bottom">bottom</a>, in § 2.6 <li><a href="#propdef-box-shadow">box-shadow</a>, in § 6.1 <li><a href="#canvas-background">canvas background</a>, in § 2.11.1 <li><a href="#canvas-surface">canvas surface</a>, in § 2.11 <li><a href="#valdef-background-position-center">center</a>, in § 2.6 <li><a href="#shadow-color"><color></a>, in § 6.1 <li><a href="#valdef-background-size-contain">contain</a>, in § 2.9 <li> content-box <ul> <li><a href="#valdef-background-clip-content-box">value for background-clip</a>, in § 2.7 <li><a href="#valdef-background-origin-content-box">value for background-origin</a>, in § 2.8 </ul> <li><a href="#valdef-background-size-cover">cover</a>, in § 2.9 <li><a href="#valdef-line-style-dashed">dashed</a>, in § 3.2 <li><a href="#valdef-line-style-dotted">dotted</a>, in § 3.2 <li><a href="#valdef-line-style-double">double</a>, in § 3.2 <li><a href="#border-image-slice-fill">fill</a>, in § 5.2 <li><a href="#typedef-final-bg-layer"><final-bg-layer></a>, in § 2.10 <li><a href="#valdef-background-attachment-fixed">fixed</a>, in § 2.5 <li><a href="#valdef-line-style-groove">groove</a>, in § 3.2 <li><a href="#valdef-line-style-hidden">hidden</a>, in § 3.2 <li><a href="#box-shadow-horizontal-offset">horizontal offset</a>, in § 6.1 <li><a href="#background-images">image</a>, in § 2.3 <li><a href="#box-shadow-inner-box-shadow">inner box-shadow</a>, in § 6.1 <li><a href="#box-shadow-inner-box-shadow">inner shadow</a>, in § 6.1 <li> inset <ul> <li><a href="#valdef-line-style-inset">value for <line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border</a>, in § 3.2 <li><a href="#shadow-inset">value for box-shadow</a>, in § 6.1 </ul> <li><a href="#background-image-layer">layer</a>, in § 2.1 <li><a href="#valdef-background-position-left">left</a>, in § 2.6 <li><a href="#valdef-background-position-length"><length></a>, in § 2.6 <li> <length-percentage [0,∞]> <ul> <li><a href="#valdef-background-size-length-percentage-0">value for background-size</a>, in § 2.9 <li><a href="#valdef-border-image-width-length-percentage-0">value for border-image-width</a>, in § 5.3 </ul> <li><a href="#typedef-line-style"><line-style></a>, in § 3.2 <li><a href="#typedef-line-width"><line-width></a>, in § 3.3 <li><a href="#valdef-background-attachment-local">local</a>, in § 2.5 <li><a href="#valdef-line-width-medium">medium</a>, in § 3.3 <li> none <ul> <li><a href="#valdef-line-style-none">value for <line-style>, border-style, border-top-style, border-left-style, border-bottom-style, border-right-style, border</a>, in § 3.2 <li><a href="#valdef-background-image-none">value for background-image</a>, in § 2.3 <li><a href="#box-shadow-none">value for box-shadow</a>, in § 6.1 </ul> <li><a href="#valdef-background-repeat-no-repeat">no-repeat</a>, in § 2.4 <li> <number [0,∞]> <ul> <li><a href="#valdef-border-image-slice-number-0">value for border-image-slice</a>, in § 5.2 <li><a href="#valdef-border-image-width-number-0">value for border-image-width</a>, in § 5.3 </ul> <li><a href="#box-shadow-outer-box-shadow">outer box-shadow</a>, in § 6.1 <li><a href="#box-shadow-outer-box-shadow">outer shadow</a>, in § 6.1 <li><a href="#valdef-line-style-outset">outset</a>, in § 3.2 <li> padding-box <ul> <li><a href="#valdef-background-clip-padding-box">value for background-clip</a>, in § 2.7 <li><a href="#valdef-background-origin-padding-box">value for background-origin</a>, in § 2.8 </ul> <li><a href="#valdef-background-position-percentage"><percentage></a>, in § 2.6 <li><a href="#valdef-border-image-slice-percentage-0"><percentage [0,∞]></a>, in § 5.2 <li><a href="#border-image-region">region</a>, in § 5.3 <li> repeat <ul> <li><a href="#valdef-background-repeat-repeat">value for background-repeat</a>, in § 2.4 <li><a href="#valdef-border-image-repeat-repeat">value for border-image-repeat</a>, in § 5.5 </ul> <li><a href="#typedef-repeat-style"><repeat-style></a>, in § 2.4 <li><a href="#valdef-background-repeat-repeat-x">repeat-x</a>, in § 2.4 <li><a href="#valdef-background-repeat-repeat-y">repeat-y</a>, in § 2.4 <li><a href="#valdef-line-style-ridge">ridge</a>, in § 3.2 <li><a href="#valdef-background-position-right">right</a>, in § 2.6 <li> round <ul> <li><a href="#valdef-background-repeat-round">value for background-repeat</a>, in § 2.4 <li><a href="#valdef-border-image-repeat-round">value for border-image-repeat</a>, in § 5.5 </ul> <li><a href="#valdef-background-attachment-scroll">scroll</a>, in § 2.5 <li><a href="#typedef-shadow"><shadow></a>, in § 6.1 <li><a href="#valdef-line-style-solid">solid</a>, in § 3.2 <li> space <ul> <li><a href="#valdef-background-repeat-space">value for background-repeat</a>, in § 2.4 <li><a href="#valdef-border-image-repeat-space">value for border-image-repeat</a>, in § 5.5 </ul> <li><a href="#box-shadow-spread-distance">spread distance</a>, in § 6.1 <li><a href="#valdef-border-image-repeat-stretch">stretch</a>, in § 5.5 <li><a href="#valdef-line-width-thick">thick</a>, in § 3.3 <li><a href="#valdef-line-width-thin">thin</a>, in § 3.3 <li><a href="#valdef-background-position-top">top</a>, in § 2.6 <li><a href="#box-shadow-vertical-offset">vertical offset</a>, in § 6.1 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-2023]</a> defines the following terms: <ul> <li>ua </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li><visual-box> <li>border <li>border area <li>border box <li>border edge <li>content area <li>content box <li>content edge <li>margin <li>margin area <li>margin edge <li>padding <li>padding area <li>padding box <li>padding edge </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>box fragment <li>box-decoration-break </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>computed value <li>initial value <li>shorthand property <li>specified value <li>used value </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>color <li>currentcolor <li>transparent </ul> <li> <a data-link-type="biblio">[CSS-COLOR-5]</a> defines the following terms: <ul> <li><color> </ul> <li> <a data-link-type="biblio">[CSS-CONTAIN-2]</a> defines the following terms: <ul> <li>containment </ul> <li> <a data-link-type="biblio">[CSS-CONTENT-3]</a> defines the following terms: <ul> <li>content </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>initial containing block <li>principal box <li>replaced element <li>root element </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-3]</a> defines the following terms: <ul> <li><image> <li>default object size <li>natural aspect ratio <li>natural dimension <li>natural height <li>natural size <li>natural width <li>specified size </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>scroll container <li>scrollable overflow area </ul> <li> <a data-link-type="biblio">[CSS-RUBY-1]</a> defines the following terms: <ul> <li>ruby annotation container <li>ruby base container </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>height </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>text-shadow </ul> <li> <a data-link-type="biblio">[CSS-VALUES-3]</a> defines the following terms: <ul> <li><position> </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li># <li>&& <li>, <li><length-percentage> <li><length> <li><number> <li><percentage> <li>? <li>css bracketed range notation <li>css-wide keywords <li>snap as a border width <li>value definition syntax <li>{a,b} <li>{a} <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>border-collapse <li>display <li>inline-table <li>overflow <li>table-cell <li>viewport </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>collapse </ul> <li> <a data-link-type="biblio">[FILTER-EFFECTS-1]</a> defines the following terms: <ul> <li>drop-shadow() </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>body </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li>paged media </ul> <li> <a data-link-type="biblio">[SELECTORS-3]</a> defines the following terms: <ul> <li>::first-letter <li>::first-line </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li>pseudo-element </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-2023">[CSS-2023] <dd>Chris Lilley; et al. <a href="https://www.w3.org/TR/css-2023/"><cite>CSS Snapshot 2023</cite></a>. 7 December 2023. NOTE. URL: <a href="https://www.w3.org/TR/css-2023/">https://www.w3.org/TR/css-2023/</a> <dt id="biblio-css-box-3">[CSS-BOX-3] <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/"><cite>CSS Box Model Module Level 3</cite></a>. 6 April 2023. REC. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. 3 November 2022. WD. URL: <a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Tab Atkins Jr.; Chris Lilley; Lea Verou. <a href="https://www.w3.org/TR/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. 1 November 2022. CR. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a> <dt id="biblio-css-color-5">[CSS-COLOR-5] <dd>Chris Lilley; et al. <a href="https://www.w3.org/TR/css-color-5/"><cite>CSS Color Module Level 5</cite></a>. 28 June 2022. WD. URL: <a href="https://www.w3.org/TR/css-color-5/">https://www.w3.org/TR/css-color-5/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-display-3/"><cite>CSS Display Module Level 3</cite></a>. 30 March 2023. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. 18 December 2023. CR. URL: <a href="https://www.w3.org/TR/css-images-3/">https://www.w3.org/TR/css-images-3/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. 29 March 2023. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a> <dt id="biblio-css-ruby-1">[CSS-RUBY-1] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-ruby-1/"><cite>CSS Ruby Annotation Layout Module Level 1</cite></a>. 31 December 2022. WD. URL: <a href="https://www.w3.org/TR/css-ruby-1/">https://www.w3.org/TR/css-ruby-1/</a> <dt id="biblio-css-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. 4 May 2022. WD. URL: <a href="https://www.w3.org/TR/css-text-decor-4/">https://www.w3.org/TR/css-text-decor-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. 1 December 2022. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 18 December 2023. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS21/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS21/">https://www.w3.org/TR/CSS21/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://www.w3.org/TR/CSS22/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. 12 April 2016. WD. URL: <a href="https://www.w3.org/TR/CSS22/">https://www.w3.org/TR/CSS22/</a> <dt id="biblio-filter-effects-1">[FILTER-EFFECTS-1] <dd>Dirk Schulze; Dean Jackson. <a href="https://www.w3.org/TR/filter-effects-1/"><cite>Filter Effects Module Level 1</cite></a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/filter-effects-1/">https://www.w3.org/TR/filter-effects-1/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5] <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/mediaqueries-5/"><cite>Media Queries Level 5</cite></a>. 18 December 2021. WD. URL: <a href="https://www.w3.org/TR/mediaqueries-5/">https://www.w3.org/TR/mediaqueries-5/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-selectors-3">[SELECTORS-3] <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/"><cite>Selectors Level 3</cite></a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/"><cite>Selectors Level 4</cite></a>. 11 November 2022. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-2017">[CSS-2017] <dd>Tab Atkins Jr.; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-2017/"><cite>CSS Snapshot 2017</cite></a>. 31 January 2017. NOTE. URL: <a href="https://www.w3.org/TR/css-2017/">https://www.w3.org/TR/css-2017/</a> <dt id="biblio-css-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/"><cite>CSS Fragmentation Module Level 3</cite></a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a> <dt id="biblio-css-contain-1">[CSS-CONTAIN-1] <dd>Tab Atkins Jr.; Florian Rivoal. <a href="https://www.w3.org/TR/css-contain-1/"><cite>CSS Containment Module Level 1</cite></a>. 25 October 2022. REC. URL: <a href="https://www.w3.org/TR/css-contain-1/">https://www.w3.org/TR/css-contain-1/</a> <dt id="biblio-css-contain-2">[CSS-CONTAIN-2] <dd>Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. <a href="https://www.w3.org/TR/css-contain-2/"><cite>CSS Containment Module Level 2</cite></a>. 17 September 2022. WD. URL: <a href="https://www.w3.org/TR/css-contain-2/">https://www.w3.org/TR/css-contain-2/</a> <dt id="biblio-css-content-3">[CSS-CONTENT-3] <dd>Elika Etemad; Dave Cramer. <a href="https://www.w3.org/TR/css-content-3/"><cite>CSS Generated Content Module Level 3</cite></a>. 2 August 2019. WD. URL: <a href="https://www.w3.org/TR/css-content-3/">https://www.w3.org/TR/css-content-3/</a> <dt id="biblio-css-shapes">[CSS-SHAPES] <dd>Rossen Atanassov; Alan Stearns. <a href="https://www.w3.org/TR/css-shapes-1/"><cite>CSS Shapes Module Level 1</cite></a>. 15 November 2022. CR. URL: <a href="https://www.w3.org/TR/css-shapes-1/">https://www.w3.org/TR/css-shapes-1/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. 17 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a> <dt id="biblio-wcag20">[WCAG20] <dd>Ben Caldwell; et al. <a href="https://www.w3.org/TR/WCAG20/"><cite>Web Content Accessibility Guidelines (WCAG) 2.0</cite></a>. 11 December 2008. REC. URL: <a href="https://www.w3.org/TR/WCAG20/">https://www.w3.org/TR/WCAG20/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <th scope="col">Logical property group <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background" id="ref-for-propdef-background⑨">background</a> <td><bg-layer>#? , <final-bg-layer> <td>see individual properties <td>all elements <td>no <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-attachment" id="ref-for-propdef-background-attachment⑦">background-attachment</a> <td><attachment># <td>scroll <td>all elements <td>no <td>N/A <td>discrete <td>per grammar <td>list, each item the keyword as specified <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-clip" id="ref-for-propdef-background-clip①③">background-clip</a> <td><visual-box># <td>border-box <td>all elements <td>no <td>N/A <td>repeatable list <td>per grammar <td>list, each item a keyword as specified <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-color" id="ref-for-propdef-background-color①①">background-color</a> <td><color> <td>transparent <td>all elements <td>no <td>N/A <td>by computed value <td>per grammar <td>computed color <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-image" id="ref-for-propdef-background-image①①">background-image</a> <td><bg-image># <td>none <td>all elements <td>no <td>N/A <td>discrete <td>per grammar <td>list, each item either an <image> or the keyword none <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-origin" id="ref-for-propdef-background-origin⑨">background-origin</a> <td><visual-box># <td>padding-box <td>all elements <td>no <td>N/A <td>repeatable list <td>per grammar <td>list, each item a keyword as specified <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-position" id="ref-for-propdef-background-position①⑦">background-position</a> <td><bg-position># <td>0% 0% <td>all elements <td>no <td>refer to size of background positioning area minus size of background image; see text <td>repeatable list <td>per grammar <td>list, each item a pair of offsets (horizontal and vertical) from the top left origin each given as a computed <length-percentage> value <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-repeat" id="ref-for-propdef-background-repeat①⓪">background-repeat</a> <td><repeat-style># <td>repeat <td>all elements <td>no <td>N/A <td>discrete <td>per grammar <td>list, each item a pair of keywords, one per dimension <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-background-size" id="ref-for-propdef-background-size⑦">background-size</a> <td><bg-size># <td>auto <td>all elements <td>no <td>see text <td>repeatable list <td>per grammar <td>list, each item a pair of sizes (one per axis) each represented as either a keyword or a computed <length-percentage> value <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border" id="ref-for-propdef-border①①">border</a> <td><line-width> || <line-style> || <color> <td>See individual properties <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-bottom" id="ref-for-propdef-border-bottom②">border-bottom</a> <td><line-width> || <line-style> || <color> <td>See individual properties <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-bottom-color" id="ref-for-propdef-border-bottom-color①">border-bottom-color</a> <td><color> <td>currentColor <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>by computed value <td>per grammar <td>computed color <td>border-color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-bottom-left-radius" id="ref-for-propdef-border-bottom-left-radius">border-bottom-left-radius</a> <td><length-percentage [0,∞]>{1,2} <td>0 <td>all elements (but see prose) <td>no <td>Refer to corresponding dimension of the border box. <td>by computed value <td>per grammar <td>pair of computed <length-percentage> values <td>border-radius <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-bottom-right-radius" id="ref-for-propdef-border-bottom-right-radius">border-bottom-right-radius</a> <td><length-percentage [0,∞]>{1,2} <td>0 <td>all elements (but see prose) <td>no <td>Refer to corresponding dimension of the border box. <td>by computed value <td>per grammar <td>pair of computed <length-percentage> values <td>border-radius <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-bottom-style" id="ref-for-propdef-border-bottom-style①">border-bottom-style</a> <td><line-style> <td>none <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>discrete <td>per grammar <td>specified keyword <td>border-style <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width①">border-bottom-width</a> <td><line-width> <td>medium <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>by computed value <td>per grammar <td>absolute length, snapped as a border width; zero if the border style is none or hidden <td>border-width <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-color" id="ref-for-propdef-border-color⑨">border-color</a> <td><color>{1,4} <td>(see individual properties) <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-image" id="ref-for-propdef-border-image①⓪">border-image</a> <td><'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'> <td>See individual properties <td>See individual properties <td>no <td>N/A <td>See individual properties <td>per grammar <td>See individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-image-outset" id="ref-for-propdef-border-image-outset④">border-image-outset</a> <td>[ <length [0,∞]> | <number [0,∞]> ]{1,4} <td>0 <td>All elements, except internal table elements when border-collapse is collapse <td>no <td>N/A <td>by computed value <td>per grammar <td>four values, each a number or absolute length <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-image-repeat" id="ref-for-propdef-border-image-repeat⑤">border-image-repeat</a> <td>[ stretch | repeat | round | space ]{1,2} <td>stretch <td>All elements, except internal table elements when border-collapse is collapse <td>no <td>N/A <td>discrete <td>per grammar <td>two keywords, one per axis <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-image-slice" id="ref-for-propdef-border-image-slice⑧">border-image-slice</a> <td>[<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill? <td>100% <td>All elements, except internal table elements when border-collapse is collapse <td>no <td>refer to size of the border image <td>by computed value <td>per grammar <td>four values, each either a number or percentage; plus a fill keyword if specified <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-image-source" id="ref-for-propdef-border-image-source⑦">border-image-source</a> <td>none | <image> <td>none <td>All elements, except internal table elements when border-collapse is collapse <td>no <td>N/A <td>discrete <td>per grammar <td>the keyword none or the computed <image> <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-image-width" id="ref-for-propdef-border-image-width①⑤">border-image-width</a> <td>[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4} <td>1 <td>All elements, except internal table elements when border-collapse is collapse <td>no <td>Relative to width/height of the border image area <td>by computed value <td>per grammar <td>four values, each either a number, the keyword auto, or a computed <length-percentage> value <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-left" id="ref-for-propdef-border-left⑤">border-left</a> <td><line-width> || <line-style> || <color> <td>See individual properties <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-left-color" id="ref-for-propdef-border-left-color①">border-left-color</a> <td><color> <td>currentColor <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>by computed value <td>per grammar <td>computed color <td>border-color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-left-style" id="ref-for-propdef-border-left-style①">border-left-style</a> <td><line-style> <td>none <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>discrete <td>per grammar <td>specified keyword <td>border-style <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-left-width" id="ref-for-propdef-border-left-width①">border-left-width</a> <td><line-width> <td>medium <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>by computed value <td>per grammar <td>absolute length, snapped as a border width; zero if the border style is none or hidden <td>border-width <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-radius" id="ref-for-propdef-border-radius①⑥">border-radius</a> <td><length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]? <td>see individual properties <td>all elements (but see prose) <td>no <td>Refer to corresponding dimension of the border box. <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-right" id="ref-for-propdef-border-right②">border-right</a> <td><line-width> || <line-style> || <color> <td>See individual properties <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-right-color" id="ref-for-propdef-border-right-color①">border-right-color</a> <td><color> <td>currentColor <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>by computed value <td>per grammar <td>computed color <td>border-color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-right-style" id="ref-for-propdef-border-right-style①">border-right-style</a> <td><line-style> <td>none <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>discrete <td>per grammar <td>specified keyword <td>border-style <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-right-width" id="ref-for-propdef-border-right-width①">border-right-width</a> <td><line-width> <td>medium <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>by computed value <td>per grammar <td>absolute length, snapped as a border width; zero if the border style is none or hidden <td>border-width <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-style" id="ref-for-propdef-border-style①③">border-style</a> <td><line-style>{1,4} <td>(see individual properties) <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-top" id="ref-for-propdef-border-top②">border-top</a> <td><line-width> || <line-style> || <color> <td>See individual properties <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-top-color" id="ref-for-propdef-border-top-color①">border-top-color</a> <td><color> <td>currentColor <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>by computed value <td>per grammar <td>computed color <td>border-color <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-top-left-radius" id="ref-for-propdef-border-top-left-radius①">border-top-left-radius</a> <td><length-percentage [0,∞]>{1,2} <td>0 <td>all elements (but see prose) <td>no <td>Refer to corresponding dimension of the border box. <td>by computed value <td>per grammar <td>pair of computed <length-percentage> values <td>border-radius <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-top-right-radius" id="ref-for-propdef-border-top-right-radius">border-top-right-radius</a> <td><length-percentage [0,∞]>{1,2} <td>0 <td>all elements (but see prose) <td>no <td>Refer to corresponding dimension of the border box. <td>by computed value <td>per grammar <td>pair of computed <length-percentage> values <td>border-radius <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-top-style" id="ref-for-propdef-border-top-style①">border-top-style</a> <td><line-style> <td>none <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>discrete <td>per grammar <td>specified keyword <td>border-style <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-top-width" id="ref-for-propdef-border-top-width①">border-top-width</a> <td><line-width> <td>medium <td>all elements except ruby base containers and ruby annotation containers <td>no <td>N/A <td>by computed value <td>per grammar <td>absolute length, snapped as a border width; zero if the border style is none or hidden <td>border-width <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-border-width" id="ref-for-propdef-border-width①⑥">border-width</a> <td><line-width>{1,4} <td>(see individual properties) <td>all elements except ruby base containers and ruby annotation containers <td>no <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-box-shadow" id="ref-for-propdef-box-shadow①⓪">box-shadow</a> <td>none | <shadow># <td>none <td>all elements <td>no <td>N/A <td>by computed value, treating none as a zero-item list and appending blank shadows (transparent 0 0 0 0) with a corresponding inset keyword as needed to match the longer list if the shorter list is otherwise compatible with the longer one <td>per grammar <td>either the keyword none or a list, each item consisting of four absolute lengths plus a computed color and optionally also a inset keyword <td> </table> </div> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "093a0ff1": {"dfnID":"093a0ff1","dfnText":"padding edge","external":true,"refSections":[{"refs":[{"id":"ref-for-padding-edge"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-padding-edge\u2460"},{"id":"ref-for-padding-edge\u2461"},{"id":"ref-for-padding-edge\u2462"}],"title":"4.2. \nCorner Shaping"},{"refs":[{"id":"ref-for-padding-edge\u2463"},{"id":"ref-for-padding-edge\u2464"}],"title":"4.3. \nCorner Clipping"}],"url":"https://www.w3.org/TR/css-box-4/#padding-edge"}, "0f70e5fd": {"dfnID":"0f70e5fd","dfnText":"margin area","external":true,"refSections":[{"refs":[{"id":"ref-for-margin-area"}],"title":"5. \nBorder Images"}],"url":"https://www.w3.org/TR/css-box-4/#margin-area"}, "128295ac": {"dfnID":"128295ac","dfnText":"<percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage-value"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-percentage-value\u2460"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-percentage-value\u2461"},{"id":"ref-for-percentage-value\u2462"}],"title":"5.2. \nImage Slicing: the border-image-slice property"}],"url":"https://www.w3.org/TR/css-values-4/#percentage-value"}, "153743a1": {"dfnID":"153743a1","dfnText":"ruby base container","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-base-container-box"}],"title":"Unnumbered Section"},{"refs":[{"id":"ref-for-ruby-base-container-box\u2460"},{"id":"ref-for-ruby-base-container-box\u2461"}],"title":"3.1. \nLine Colors: the border-color properties"},{"refs":[{"id":"ref-for-ruby-base-container-box\u2462"},{"id":"ref-for-ruby-base-container-box\u2463"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-ruby-base-container-box\u2464"},{"id":"ref-for-ruby-base-container-box\u2465"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-ruby-base-container-box\u2466"},{"id":"ref-for-ruby-base-container-box\u2467"}],"title":"3.4. \nBorder Shorthand Properties"}],"url":"https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box"}, "15d1a46a": {"dfnID":"15d1a46a","dfnText":"value definition syntax","external":true,"refSections":[{"refs":[{"id":"ref-for-css-value-definition-syntax"}],"title":"8.1. \nChanges since the 14 February 2023 Candidate Recommendation Snapshot"}],"url":"https://www.w3.org/TR/css-values-4/#css-value-definition-syntax"}, "15e1e804": {"dfnID":"15e1e804","dfnText":"padding box","external":true,"refSections":[{"refs":[{"id":"ref-for-padding-box"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-padding-box\u2460"}],"title":"2.8. \nPositioning Area: the background-origin property"}],"url":"https://www.w3.org/TR/css-box-4/#padding-box"}, "16ff1cf8": {"dfnID":"16ff1cf8","dfnText":"margin edge","external":true,"refSections":[{"refs":[{"id":"ref-for-margin-edge"}],"title":"4.2. \nCorner Shaping"}],"url":"https://www.w3.org/TR/css-box-4/#margin-edge"}, "1a2825fc": {"dfnID":"1a2825fc","dfnText":"drop-shadow()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-filter-drop-shadow"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"}],"url":"https://www.w3.org/TR/filter-effects-1/#funcdef-filter-drop-shadow"}, "1a2b1083": {"dfnID":"1a2b1083","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"}],"title":"2.1. \nLayering Multiple Background Images"},{"refs":[{"id":"ref-for-used-value\u2460"}],"title":"2.11.1. \nThe Canvas Background and the Root Element"},{"refs":[{"id":"ref-for-used-value\u2461"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"},{"refs":[{"id":"ref-for-used-value\u2462"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-used-value\u2463"}],"title":"5.3. \nDrawing Areas: the border-image-width property"}],"url":"https://www.w3.org/TR/css-cascade-5/#used-value"}, "23af89d0": {"dfnID":"23af89d0","dfnText":"paged media","external":true,"refSections":[{"refs":[{"id":"ref-for-paged-media"}],"title":"2.5. \nAffixing Images: the background-attachment property"}],"url":"https://www.w3.org/TR/mediaqueries-5/#paged-media"}, "244c26d9": {"dfnID":"244c26d9","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"},{"id":"ref-for-propdef-overflow\u2460"}],"title":"4.3. \nCorner Clipping"},{"refs":[{"id":"ref-for-propdef-overflow\u2461"}],"title":"8.1. \nChanges since the 14 February 2023 Candidate Recommendation Snapshot"}],"url":"https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow"}, "24ae9eec": {"dfnID":"24ae9eec","dfnText":"natural width","external":true,"refSections":[{"refs":[{"id":"ref-for-natural-width"}],"title":"2.9. Sizing Images: the background-size property"}],"url":"https://www.w3.org/TR/css-images-3/#natural-width"}, "253362bb": {"dfnID":"253362bb","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"3.4. \nBorder Shorthand Properties"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-margin"}, "299e10e4": {"dfnID":"299e10e4","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"}],"title":"4.3. \nCorner Clipping"}],"url":"https://www.w3.org/TR/css-display-3/#replaced-element"}, "29ca9f85": {"dfnID":"29ca9f85","dfnText":"border-collapse","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-collapse"},{"id":"ref-for-propdef-border-collapse\u2460"}],"title":"4.6. \nEffect on Tables"},{"refs":[{"id":"ref-for-propdef-border-collapse\u2461"}],"title":"5.1. \nImage Source: the border-image-source property"},{"refs":[{"id":"ref-for-propdef-border-collapse\u2462"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-propdef-border-collapse\u2463"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-propdef-border-collapse\u2464"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"},{"refs":[{"id":"ref-for-propdef-border-collapse\u2465"}],"title":"5.5. \nImage Tiling: the border-image-repeat property"},{"refs":[{"id":"ref-for-propdef-border-collapse\u2466"}],"title":"5.8. Effect on Tables"}],"url":"https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse"}, "2f0492ac": {"dfnID":"2f0492ac","dfnText":"body","external":true,"refSections":[{"refs":[{"id":"ref-for-the-body-element"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"}],"url":"https://html.spec.whatwg.org/multipage/sections.html#the-body-element"}, "30e036e4": {"dfnID":"30e036e4","dfnText":"border","external":true,"refSections":[{"refs":[{"id":"ref-for-border"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-border\u2460"}],"title":"3. \nBorders"},{"refs":[{"id":"ref-for-border\u2461"}],"title":"3.1. \nLine Colors: the border-color properties"},{"refs":[{"id":"ref-for-border\u2462"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-border\u2463"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-border\u2464"}],"title":"3.4. \nBorder Shorthand Properties"}],"url":"https://www.w3.org/TR/css-box-4/#border"}, "31d72d5d": {"dfnID":"31d72d5d","dfnText":"<position>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-position"},{"id":"ref-for-typedef-position\u2460"}],"title":"2.6.1. \nSerialization of background-position values"},{"refs":[{"id":"ref-for-typedef-position\u2461"}],"title":"8.4. \nChanges since the 9 September 2014 Candidate Recommendation"},{"refs":[{"id":"ref-for-typedef-position\u2462"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-values-3/#typedef-position"}, "3218f3af": {"dfnID":"3218f3af","dfnText":"::first-line","external":true,"refSections":[{"refs":[{"id":"ref-for-sel-first-line"},{"id":"ref-for-sel-first-line\u2460"},{"id":"ref-for-sel-first-line\u2461"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-sel-first-line\u2462"},{"id":"ref-for-sel-first-line\u2463"}],"title":"2.11.3. \nThe ::first-line Pseudo-element\u2018s Background"},{"refs":[{"id":"ref-for-sel-first-line\u2464"}],"title":"8.8. \nChanges since the 14 February 2012 \u201cLast Call\u201d Working Draft"}],"url":"https://www.w3.org/TR/selectors-3/#sel-first-line"}, "35bf32f2": {"dfnID":"35bf32f2","dfnText":"<image>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-image"},{"id":"ref-for-typedef-image\u2460"}],"title":"2.3. \nImage Sources: the background-image property"},{"refs":[{"id":"ref-for-typedef-image\u2461"},{"id":"ref-for-typedef-image\u2462"}],"title":"5.1. \nImage Source: the border-image-source property"}],"url":"https://www.w3.org/TR/css-images-3/#typedef-image"}, "3bafef5e": {"dfnID":"3bafef5e","dfnText":"{a,b}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num-range"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-mult-num-range\u2460"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-mult-num-range\u2461"}],"title":"3.1. \nLine Colors: the border-color properties"},{"refs":[{"id":"ref-for-mult-num-range\u2462"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-mult-num-range\u2463"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-mult-num-range\u2464"},{"id":"ref-for-mult-num-range\u2465"},{"id":"ref-for-mult-num-range\u2466"}],"title":"4.1. \nCurve Radii: the border-radius properties"},{"refs":[{"id":"ref-for-mult-num-range\u2467"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-mult-num-range\u2468"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-mult-num-range\u2460\u24ea"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"},{"refs":[{"id":"ref-for-mult-num-range\u2460\u2460"}],"title":"5.5. \nImage Tiling: the border-image-repeat property"}],"url":"https://www.w3.org/TR/css-values-4/#mult-num-range"}, "3e6781f5": {"dfnID":"3e6781f5","dfnText":"border edge","external":true,"refSections":[{"refs":[{"id":"ref-for-border-edge"}],"title":"4.1. \nCurve Radii: the border-radius properties"},{"refs":[{"id":"ref-for-border-edge\u2460"}],"title":"4.2. \nCorner Shaping"},{"refs":[{"id":"ref-for-border-edge\u2461"},{"id":"ref-for-border-edge\u2462"}],"title":"4.3. \nCorner Clipping"}],"url":"https://www.w3.org/TR/css-box-4/#border-edge"}, "3ed7991e": {"dfnID":"3ed7991e","dfnText":"scrollable overflow area","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollable-overflow-region"},{"id":"ref-for-scrollable-overflow-region\u2460"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-scrollable-overflow-region\u2461"}],"title":"6.1.3. \nLayering, Layout, and Other Details"}],"url":"https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region"}, "487e1aa9": {"dfnID":"487e1aa9","dfnText":"natural dimension","external":true,"refSections":[{"refs":[{"id":"ref-for-natural-dimensions"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-natural-dimensions\u2460"}],"title":"5.3. \nDrawing Areas: the border-image-width property"}],"url":"https://www.w3.org/TR/css-images-3/#natural-dimensions"}, "4d06fa38": {"dfnID":"4d06fa38","dfnText":"pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-pseudo-element"},{"id":"ref-for-pseudo-element\u2460"}],"title":"1.1. \nModule Interactions"}],"url":"https://www.w3.org/TR/selectors-4/#pseudo-element"}, "4eb9d37e": {"dfnID":"4eb9d37e","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"2.3. \nImage Sources: the background-image property"},{"refs":[{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-comb-one\u2467"},{"id":"ref-for-comb-one\u2468"},{"id":"ref-for-comb-one\u2460\u24ea"},{"id":"ref-for-comb-one\u2460\u2460"},{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"},{"id":"ref-for-comb-one\u2460\u2463"},{"id":"ref-for-comb-one\u2460\u2464"},{"id":"ref-for-comb-one\u2460\u2465"},{"id":"ref-for-comb-one\u2460\u2466"},{"id":"ref-for-comb-one\u2460\u2467"},{"id":"ref-for-comb-one\u2460\u2468"},{"id":"ref-for-comb-one\u2461\u24ea"},{"id":"ref-for-comb-one\u2461\u2460"},{"id":"ref-for-comb-one\u2461\u2461"},{"id":"ref-for-comb-one\u2461\u2462"},{"id":"ref-for-comb-one\u2461\u2463"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-comb-one\u2461\u2464"},{"id":"ref-for-comb-one\u2461\u2465"},{"id":"ref-for-comb-one\u2461\u2466"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-comb-one\u2461\u2467"},{"id":"ref-for-comb-one\u2461\u2468"},{"id":"ref-for-comb-one\u2462\u24ea"},{"id":"ref-for-comb-one\u2462\u2460"},{"id":"ref-for-comb-one\u2462\u2461"},{"id":"ref-for-comb-one\u2462\u2462"},{"id":"ref-for-comb-one\u2462\u2463"},{"id":"ref-for-comb-one\u2462\u2464"},{"id":"ref-for-comb-one\u2462\u2465"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-comb-one\u2462\u2466"},{"id":"ref-for-comb-one\u2462\u2467"},{"id":"ref-for-comb-one\u2462\u2468"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-comb-one\u2463\u24ea"}],"title":"5.1. \nImage Source: the border-image-source property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2460"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2461"},{"id":"ref-for-comb-one\u2463\u2462"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2463"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2464"},{"id":"ref-for-comb-one\u2463\u2465"},{"id":"ref-for-comb-one\u2463\u2466"}],"title":"5.5. \nImage Tiling: the border-image-repeat property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2467"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"},{"refs":[{"id":"ref-for-comb-one\u2463\u2468"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-comb-one\u2464\u24ea"},{"id":"ref-for-comb-one\u2464\u2460"},{"id":"ref-for-comb-one\u2464\u2461"},{"id":"ref-for-comb-one\u2464\u2462"},{"id":"ref-for-comb-one\u2464\u2463"},{"id":"ref-for-comb-one\u2464\u2464"},{"id":"ref-for-comb-one\u2464\u2465"},{"id":"ref-for-comb-one\u2464\u2466"},{"id":"ref-for-comb-one\u2464\u2467"},{"id":"ref-for-comb-one\u2464\u2468"},{"id":"ref-for-comb-one\u2465\u24ea"},{"id":"ref-for-comb-one\u2465\u2460"},{"id":"ref-for-comb-one\u2465\u2461"},{"id":"ref-for-comb-one\u2465\u2462"},{"id":"ref-for-comb-one\u2465\u2463"},{"id":"ref-for-comb-one\u2465\u2464"},{"id":"ref-for-comb-one\u2465\u2465"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "4f31b139": {"dfnID":"4f31b139","dfnText":"containment","external":true,"refSections":[{"refs":[{"id":"ref-for-containment"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"}],"url":"https://www.w3.org/TR/css-contain-2/#containment"}, "4f460096": {"dfnID":"4f460096","dfnText":"snap as a border width","external":true,"refSections":[{"refs":[{"id":"ref-for-snap-a-length-as-a-border-width"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-snap-a-length-as-a-border-width\u2460"}],"title":"8.1. \nChanges since the 14 February 2023 Candidate Recommendation Snapshot"}],"url":"https://www.w3.org/TR/css-values-4/#snap-a-length-as-a-border-width"}, "4fd7e54f": {"dfnID":"4fd7e54f","dfnText":"<length-percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"},{"id":"ref-for-typedef-length-percentage\u2460"},{"id":"ref-for-typedef-length-percentage\u2461"},{"id":"ref-for-typedef-length-percentage\u2462"},{"id":"ref-for-typedef-length-percentage\u2463"},{"id":"ref-for-typedef-length-percentage\u2464"},{"id":"ref-for-typedef-length-percentage\u2465"},{"id":"ref-for-typedef-length-percentage\u2466"},{"id":"ref-for-typedef-length-percentage\u2467"},{"id":"ref-for-typedef-length-percentage\u2468"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2460\u24ea"},{"id":"ref-for-typedef-length-percentage\u2460\u2460"},{"id":"ref-for-typedef-length-percentage\u2460\u2461"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2460\u2462"},{"id":"ref-for-typedef-length-percentage\u2460\u2463"},{"id":"ref-for-typedef-length-percentage\u2460\u2464"},{"id":"ref-for-typedef-length-percentage\u2460\u2465"},{"id":"ref-for-typedef-length-percentage\u2460\u2466"}],"title":"4.1. \nCurve Radii: the border-radius properties"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2460\u2467"},{"id":"ref-for-typedef-length-percentage\u2460\u2468"},{"id":"ref-for-typedef-length-percentage\u2461\u24ea"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2461\u2460"},{"id":"ref-for-typedef-length-percentage\u2461\u2461"},{"id":"ref-for-typedef-length-percentage\u2461\u2462"},{"id":"ref-for-typedef-length-percentage\u2461\u2463"},{"id":"ref-for-typedef-length-percentage\u2461\u2464"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-length-percentage"}, "5ad01cca": {"dfnID":"5ad01cca","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"}],"title":"4.5. \nOverlapping Curves"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-height"}, "61bb5e44": {"dfnID":"61bb5e44","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"},{"id":"ref-for-number-value\u2460"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-number-value\u2461"},{"id":"ref-for-number-value\u2462"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-number-value\u2463"},{"id":"ref-for-number-value\u2464"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"}],"url":"https://www.w3.org/TR/css-values-4/#number-value"}, "667c691b": {"dfnID":"667c691b","dfnText":"::first-letter","external":true,"refSections":[{"refs":[{"id":"ref-for-first-letter0"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-first-letter0\u2460"}],"title":"8.8. \nChanges since the 14 February 2012 \u201cLast Call\u201d Working Draft"}],"url":"https://www.w3.org/TR/selectors-3/#first-letter0"}, "6694799c": {"dfnID":"6694799c","dfnText":"padding area","external":true,"refSections":[{"refs":[{"id":"ref-for-padding-area"}],"title":"1. Introduction"}],"url":"https://www.w3.org/TR/css-box-4/#padding-area"}, "69de5ee0": {"dfnID":"69de5ee0","dfnText":"border area","external":true,"refSections":[{"refs":[{"id":"ref-for-border-area"},{"id":"ref-for-border-area\u2460"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-border-area\u2461"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-border-area\u2462"}],"title":"4.2. \nCorner Shaping"}],"url":"https://www.w3.org/TR/css-box-4/#border-area"}, "6b448e93": {"dfnID":"6b448e93","dfnText":"initial value","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-value"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-initial-value\u2460"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"},{"refs":[{"id":"ref-for-initial-value\u2461"},{"id":"ref-for-initial-value\u2462"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-initial-value\u2463"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-initial-value\u2464"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"}],"url":"https://www.w3.org/TR/css-cascade-5/#initial-value"}, "7015f3a0": {"dfnID":"7015f3a0","dfnText":"ruby annotation container","external":true,"refSections":[{"refs":[{"id":"ref-for-ruby-annotation-container-box"}],"title":"Unnumbered Section"},{"refs":[{"id":"ref-for-ruby-annotation-container-box\u2460"},{"id":"ref-for-ruby-annotation-container-box\u2461"}],"title":"3.1. \nLine Colors: the border-color properties"},{"refs":[{"id":"ref-for-ruby-annotation-container-box\u2462"},{"id":"ref-for-ruby-annotation-container-box\u2463"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-ruby-annotation-container-box\u2464"},{"id":"ref-for-ruby-annotation-container-box\u2465"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-ruby-annotation-container-box\u2466"},{"id":"ref-for-ruby-annotation-container-box\u2467"}],"title":"3.4. \nBorder Shorthand Properties"}],"url":"https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box"}, "85c399c0": {"dfnID":"85c399c0","dfnText":"border box","external":true,"refSections":[{"refs":[{"id":"ref-for-border-box"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-border-box\u2460"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-border-box\u2461"},{"id":"ref-for-border-box\u2462"},{"id":"ref-for-border-box\u2463"},{"id":"ref-for-border-box\u2464"}],"title":"4.1. \nCurve Radii: the border-radius properties"},{"refs":[{"id":"ref-for-border-box\u2465"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-border-box\u2466"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-border-box\u2467"},{"id":"ref-for-border-box\u2468"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"}],"url":"https://www.w3.org/TR/css-box-4/#border-box"}, "861626b1": {"dfnID":"861626b1","dfnText":"ua","external":true,"refSections":[{"refs":[{"id":"ref-for-user-agent"}],"title":"2.1. \nLayering Multiple Background Images"}],"url":"https://www.w3.org/TR/css-2023/#user-agent"}, "8a110a7b": {"dfnID":"8a110a7b","dfnText":"css-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.2. \nValue Definitions"}],"url":"https://www.w3.org/TR/css-values-4/#css-wide-keywords"}, "8b4f8a45": {"dfnID":"8b4f8a45","dfnText":"root element","external":true,"refSections":[{"refs":[{"id":"ref-for-root-element"}],"title":"2.11. \nBackgrounds of Special Elements"},{"refs":[{"id":"ref-for-root-element\u2460"}],"title":"2.11.1. \nThe Canvas Background and the Root Element"},{"refs":[{"id":"ref-for-root-element\u2461"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"}],"url":"https://www.w3.org/TR/css-display-3/#root-element"}, "8b60933e": {"dfnID":"8b60933e","dfnText":"collapse","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-border-collapse-collapse"}],"title":"4.6. \nEffect on Tables"},{"refs":[{"id":"ref-for-valdef-border-collapse-collapse\u2460"}],"title":"5.1. \nImage Source: the border-image-source property"},{"refs":[{"id":"ref-for-valdef-border-collapse-collapse\u2461"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-valdef-border-collapse-collapse\u2462"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-valdef-border-collapse-collapse\u2463"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"},{"refs":[{"id":"ref-for-valdef-border-collapse-collapse\u2464"}],"title":"5.5. \nImage Tiling: the border-image-repeat property"},{"refs":[{"id":"ref-for-valdef-border-collapse-collapse\u2465"}],"title":"5.8. Effect on Tables"}],"url":"https://drafts.csswg.org/css2/#valdef-border-collapse-collapse"}, "8c8e51b4": {"dfnID":"8c8e51b4","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"2.6.1. \nSerialization of background-position values"},{"refs":[{"id":"ref-for-computed-value\u2460"},{"id":"ref-for-computed-value\u2461"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"}],"url":"https://www.w3.org/TR/css-cascade-5/#computed-value"}, "8cbc2b3b": {"dfnID":"8cbc2b3b","dfnText":"{a}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num"}],"title":"6.1. Drop Shadows: the box-shadow property"}],"url":"https://www.w3.org/TR/css-values-4/#mult-num"}, "8cd4f032": {"dfnID":"8cd4f032","dfnText":",","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-comma"}],"title":"2.10. \nBackgrounds Shorthand: the background property"}],"url":"https://www.w3.org/TR/css-values-4/#comb-comma"}, "93f98063": {"dfnID":"93f98063","dfnText":"principal box","external":true,"refSections":[{"refs":[{"id":"ref-for-principal-box"}],"title":"6.1.3. \nLayering, Layout, and Other Details"}],"url":"https://www.w3.org/TR/css-display-3/#principal-box"}, "96e27c16": {"dfnID":"96e27c16","dfnText":"transparent","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-transparent"}],"title":"2. \nBackgrounds"},{"refs":[{"id":"ref-for-valdef-color-transparent\u2460"}],"title":"2.11.1. \nThe Canvas Background and the Root Element"},{"refs":[{"id":"ref-for-valdef-color-transparent\u2461"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"}],"url":"https://www.w3.org/TR/css-color-4/#valdef-color-transparent"}, "97bfa2a1": {"dfnID":"97bfa2a1","dfnText":"table-cell","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-table-cell"}],"title":"4.6. \nEffect on Tables"}],"url":"https://www.w3.org/TR/CSS21/tables.html#value-def-table-cell"}, "980ac56a": {"dfnID":"980ac56a","dfnText":"shorthand property","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-shorthand-property\u2460"}],"title":"3.1. \nLine Colors: the border-color properties"},{"refs":[{"id":"ref-for-shorthand-property\u2461"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-shorthand-property\u2462"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-shorthand-property\u2463"},{"id":"ref-for-shorthand-property\u2464"}],"title":"3.4. \nBorder Shorthand Properties"}],"url":"https://www.w3.org/TR/css-cascade-5/#shorthand-property"}, "98ddb9b0": {"dfnID":"98ddb9b0","dfnText":"<length>","external":true,"refSections":[{"refs":[{"id":"ref-for-length-value"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-length-value\u2460"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-length-value\u2461"},{"id":"ref-for-length-value\u2462"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"},{"refs":[{"id":"ref-for-length-value\u2463"},{"id":"ref-for-length-value\u2464"},{"id":"ref-for-length-value\u2465"},{"id":"ref-for-length-value\u2466"},{"id":"ref-for-length-value\u2467"},{"id":"ref-for-length-value\u2468"},{"id":"ref-for-length-value\u2460\u24ea"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-length-value\u2460\u2460"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"},{"refs":[{"id":"ref-for-length-value\u2460\u2461"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-values-4/#length-value"}, "99261030": {"dfnID":"99261030","dfnText":"css bracketed range notation","external":true,"refSections":[{"refs":[{"id":"ref-for-css-bracketed-range-notation"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-values-4/#css-bracketed-range-notation"}, "a0336d84": {"dfnID":"a0336d84","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"},{"id":"ref-for-comb-any\u2460"},{"id":"ref-for-comb-any\u2461"},{"id":"ref-for-comb-any\u2462"},{"id":"ref-for-comb-any\u2463"},{"id":"ref-for-comb-any\u2464"},{"id":"ref-for-comb-any\u2465"},{"id":"ref-for-comb-any\u2466"},{"id":"ref-for-comb-any\u2467"},{"id":"ref-for-comb-any\u2468"},{"id":"ref-for-comb-any\u2460\u24ea"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-comb-any\u2460\u2460"},{"id":"ref-for-comb-any\u2460\u2461"},{"id":"ref-for-comb-any\u2460\u2462"},{"id":"ref-for-comb-any\u2460\u2463"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-comb-any\u2460\u2464"},{"id":"ref-for-comb-any\u2460\u2465"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"}],"url":"https://www.w3.org/TR/css-values-4/#comb-any"}, "a0542bba": {"dfnID":"a0542bba","dfnText":"box-decoration-break","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-decoration-break"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-propdef-box-decoration-break\u2460"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-propdef-box-decoration-break\u2461"}],"title":"6. Miscellaneous Effects"},{"refs":[{"id":"ref-for-propdef-box-decoration-break\u2462"}],"title":"6.1.3. \nLayering, Layout, and Other Details"},{"refs":[{"id":"ref-for-propdef-box-decoration-break\u2463"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-box-decoration-break\u2464"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break"}, "a2942f61": {"dfnID":"a2942f61","dfnText":"inline-table","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-inline-table"}],"title":"4.6. \nEffect on Tables"}],"url":"https://www.w3.org/TR/CSS21/tables.html#value-def-inline-table"}, "a2be8c84": {"dfnID":"a2be8c84","dfnText":"padding","external":true,"refSections":[{"refs":[{"id":"ref-for-padding"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-padding\u2460"}],"title":"4.2. \nCorner Shaping"}],"url":"https://www.w3.org/TR/css-box-4/#padding"}, "a3cabdb1": {"dfnID":"a3cabdb1","dfnText":"scroll container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-container"},{"id":"ref-for-scroll-container\u2460"}],"title":"2.5. \nAffixing Images: the background-attachment property"}],"url":"https://www.w3.org/TR/css-overflow-3/#scroll-container"}, "a42c65ac": {"dfnID":"a42c65ac","dfnText":"currentcolor","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-currentcolor"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2460"},{"id":"ref-for-valdef-color-currentcolor\u2461"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor"}, "a7f17cc4": {"dfnID":"a7f17cc4","dfnText":"text-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-shadow"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow"}, "aa17b477": {"dfnID":"aa17b477","dfnText":"viewport","external":true,"refSections":[{"refs":[{"id":"ref-for-x1"}],"title":"2.5. \nAffixing Images: the background-attachment property"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#x1"}, "b9cef6bf": {"dfnID":"b9cef6bf","dfnText":"natural height","external":true,"refSections":[{"refs":[{"id":"ref-for-natural-height"}],"title":"2.9. Sizing Images: the background-size property"}],"url":"https://www.w3.org/TR/css-images-3/#natural-height"}, "background-color-layer": {"dfnID":"background-color-layer","dfnText":"background color","external":false,"refSections":[{"refs":[{"id":"ref-for-background-color-layer"}],"title":"2.2. \nBase Color: the background-color property"}],"url":"#background-color-layer"}, "background-image-layer": {"dfnID":"background-image-layer","dfnText":"background image layers","external":false,"refSections":[{"refs":[{"id":"ref-for-background-image-layer"},{"id":"ref-for-background-image-layer\u2460"},{"id":"ref-for-background-image-layer\u2461"}],"title":"2.1. \nLayering Multiple Background Images"},{"refs":[{"id":"ref-for-background-image-layer\u2462"}],"title":"2.2. \nBase Color: the background-color property"},{"refs":[{"id":"ref-for-background-image-layer\u2463"},{"id":"ref-for-background-image-layer\u2464"},{"id":"ref-for-background-image-layer\u2465"}],"title":"2.3. \nImage Sources: the background-image property"},{"refs":[{"id":"ref-for-background-image-layer\u2466"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-background-image-layer\u2467"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-background-image-layer\u2468"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-background-image-layer\u2460\u24ea"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-background-image-layer\u2460\u2460"},{"id":"ref-for-background-image-layer\u2460\u2461"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-background-image-layer\u2460\u2462"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-background-image-layer\u2460\u2463"}],"title":"2.10. \nBackgrounds Shorthand: the background property"}],"url":"#background-image-layer"}, "background-images": {"dfnID":"background-images","dfnText":"background image(s)","external":false,"refSections":[{"refs":[{"id":"ref-for-background-images"}],"title":"2.1. \nLayering Multiple Background Images"},{"refs":[{"id":"ref-for-background-images\u2460"},{"id":"ref-for-background-images\u2461"},{"id":"ref-for-background-images\u2462"},{"id":"ref-for-background-images\u2463"},{"id":"ref-for-background-images\u2464"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-background-images\u2465"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-background-images\u2466"},{"id":"ref-for-background-images\u2467"},{"id":"ref-for-background-images\u2468"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-background-images\u2460\u24ea"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-background-images\u2460\u2460"}],"title":"2.9. Sizing Images: the background-size property"}],"url":"#background-images"}, "background-painting-area": {"dfnID":"background-painting-area","dfnText":"background painting area","external":false,"refSections":[{"refs":[{"id":"ref-for-background-painting-area"},{"id":"ref-for-background-painting-area\u2460"},{"id":"ref-for-background-painting-area\u2461"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-background-painting-area\u2462"},{"id":"ref-for-background-painting-area\u2463"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-background-painting-area\u2464"},{"id":"ref-for-background-painting-area\u2465"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-background-painting-area\u2466"}],"title":"2.11.1. \nThe Canvas Background and the Root Element"}],"url":"#background-painting-area"}, "background-positioning-area": {"dfnID":"background-positioning-area","dfnText":"background positioning area","external":false,"refSections":[{"refs":[{"id":"ref-for-background-positioning-area"},{"id":"ref-for-background-positioning-area\u2460"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-background-positioning-area\u2461"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-background-positioning-area\u2462"},{"id":"ref-for-background-positioning-area\u2463"},{"id":"ref-for-background-positioning-area\u2464"},{"id":"ref-for-background-positioning-area\u2465"},{"id":"ref-for-background-positioning-area\u2466"},{"id":"ref-for-background-positioning-area\u2467"},{"id":"ref-for-background-positioning-area\u2468"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-background-positioning-area\u2460\u24ea"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-background-positioning-area\u2460\u2460"},{"id":"ref-for-background-positioning-area\u2460\u2461"},{"id":"ref-for-background-positioning-area\u2460\u2462"},{"id":"ref-for-background-positioning-area\u2460\u2463"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-background-positioning-area"}],"title":"2.11.1. \nThe Canvas Background and the Root Element"}],"url":"#background-positioning-area"}, "bcdf9b19": {"dfnID":"bcdf9b19","dfnText":"color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-color"},{"id":"ref-for-propdef-color\u2460"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-propdef-color\u2461"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-color-4/#propdef-color"}, "bdb4e757": {"dfnID":"bdb4e757","dfnText":"&&","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-all"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-comb-all\u2460"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-comb-all\u2461"},{"id":"ref-for-comb-all\u2462"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-comb-all\u2463"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-values-4/#comb-all"}, "border-color-dfn": {"dfnID":"border-color-dfn","dfnText":"color","external":false,"refSections":[],"url":"#border-color-dfn"}, "border-image-area": {"dfnID":"border-image-area","dfnText":"border image area","external":false,"refSections":[{"refs":[{"id":"ref-for-border-image-area"},{"id":"ref-for-border-image-area\u2460"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-border-image-area\u2461"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-border-image-area\u2462"},{"id":"ref-for-border-image-area\u2463"},{"id":"ref-for-border-image-area\u2464"},{"id":"ref-for-border-image-area\u2465"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-border-image-area\u2466"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"},{"refs":[{"id":"ref-for-border-image-area\u2467"},{"id":"ref-for-border-image-area\u2468"},{"id":"ref-for-border-image-area\u2460\u24ea"},{"id":"ref-for-border-image-area\u2460\u2460"}],"title":"5.6. \nDrawing the Border Image"}],"url":"#border-image-area"}, "border-image-dfn": {"dfnID":"border-image-dfn","dfnText":"border image","external":false,"refSections":[{"refs":[{"id":"ref-for-border-image-dfn"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-border-image-dfn\u2460"}],"title":"5.5. \nImage Tiling: the border-image-repeat property"},{"refs":[{"id":"ref-for-border-image-dfn\u2461"}],"title":"5.6. \nDrawing the Border Image"}],"url":"#border-image-dfn"}, "border-image-region": {"dfnID":"border-image-region","dfnText":"regions","external":false,"refSections":[{"refs":[{"id":"ref-for-border-image-region"},{"id":"ref-for-border-image-region\u2460"},{"id":"ref-for-border-image-region\u2461"},{"id":"ref-for-border-image-region\u2462"}],"title":"5.5. \nImage Tiling: the border-image-repeat property"},{"refs":[{"id":"ref-for-border-image-region\u2463"},{"id":"ref-for-border-image-region\u2464"},{"id":"ref-for-border-image-region\u2465"},{"id":"ref-for-border-image-region\u2466"}],"title":"5.6. \nDrawing the Border Image"}],"url":"#border-image-region"}, "border-image-slice-fill": {"dfnID":"border-image-slice-fill","dfnText":"fill","external":false,"refSections":[{"refs":[{"id":"ref-for-border-image-slice-fill"}],"title":"5.1. \nImage Source: the border-image-source property"},{"refs":[{"id":"ref-for-border-image-slice-fill\u2460"},{"id":"ref-for-border-image-slice-fill\u2461"},{"id":"ref-for-border-image-slice-fill\u2462"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-border-image-slice-fill\u2463"}],"title":"5.6. \nDrawing the Border Image"}],"url":"#border-image-slice-fill"}, "border-radii": {"dfnID":"border-radii","dfnText":"radii","external":false,"refSections":[{"refs":[{"id":"ref-for-border-radii"}],"title":"4.2. \nCorner Shaping"},{"refs":[{"id":"ref-for-border-radii\u2460"}],"title":"6.1.1. \nShadow Shape, Spread, and Knockout"},{"refs":[{"id":"ref-for-border-radii\u2461"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"}],"url":"#border-radii"}, "border-style-dfn": {"dfnID":"border-style-dfn","dfnText":"style","external":false,"refSections":[],"url":"#border-style-dfn"}, "border-width-dfn": {"dfnID":"border-width-dfn","dfnText":"border width","external":false,"refSections":[{"refs":[{"id":"ref-for-border-width-dfn"}],"title":"4.4. \nColor and Style Transitions"}],"url":"#border-width-dfn"}, "box-shadow-blur-radius": {"dfnID":"box-shadow-blur-radius","dfnText":"blur radius","external":false,"refSections":[{"refs":[{"id":"ref-for-box-shadow-blur-radius"}],"title":"6.1.2. \nBlurring Shadow Edges"}],"url":"#box-shadow-blur-radius"}, "box-shadow-horizontal-offset": {"dfnID":"box-shadow-horizontal-offset","dfnText":"horizontal offset","external":false,"refSections":[],"url":"#box-shadow-horizontal-offset"}, "box-shadow-inner-box-shadow": {"dfnID":"box-shadow-inner-box-shadow","dfnText":"inner box-shadow","external":false,"refSections":[{"refs":[{"id":"ref-for-box-shadow-inner-box-shadow"},{"id":"ref-for-box-shadow-inner-box-shadow\u2460"}],"title":"6.1.1. \nShadow Shape, Spread, and Knockout"},{"refs":[{"id":"ref-for-box-shadow-inner-box-shadow\u2461"}],"title":"6.1.3. \nLayering, Layout, and Other Details"}],"url":"#box-shadow-inner-box-shadow"}, "box-shadow-none": {"dfnID":"box-shadow-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-box-shadow-none"},{"id":"ref-for-box-shadow-none\u2460"}],"title":"6.1. Drop Shadows: the box-shadow property"}],"url":"#box-shadow-none"}, "box-shadow-outer-box-shadow": {"dfnID":"box-shadow-outer-box-shadow","dfnText":"outer box-shadow","external":false,"refSections":[{"refs":[{"id":"ref-for-box-shadow-outer-box-shadow"},{"id":"ref-for-box-shadow-outer-box-shadow\u2460"}],"title":"6.1.1. \nShadow Shape, Spread, and Knockout"},{"refs":[{"id":"ref-for-box-shadow-outer-box-shadow\u2461"}],"title":"6.1.3. \nLayering, Layout, and Other Details"}],"url":"#box-shadow-outer-box-shadow"}, "box-shadow-spread-distance": {"dfnID":"box-shadow-spread-distance","dfnText":"spread distance","external":false,"refSections":[{"refs":[{"id":"ref-for-box-shadow-spread-distance"},{"id":"ref-for-box-shadow-spread-distance\u2460"},{"id":"ref-for-box-shadow-spread-distance\u2461"},{"id":"ref-for-box-shadow-spread-distance\u2462"},{"id":"ref-for-box-shadow-spread-distance\u2463"},{"id":"ref-for-box-shadow-spread-distance\u2464"},{"id":"ref-for-box-shadow-spread-distance\u2465"},{"id":"ref-for-box-shadow-spread-distance\u2466"}],"title":"6.1.1. \nShadow Shape, Spread, and Knockout"},{"refs":[{"id":"ref-for-box-shadow-spread-distance\u2467"},{"id":"ref-for-box-shadow-spread-distance\u2468"},{"id":"ref-for-box-shadow-spread-distance\u2460\u24ea"},{"id":"ref-for-box-shadow-spread-distance\u2460\u2460"},{"id":"ref-for-box-shadow-spread-distance\u2460\u2461"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"}],"url":"#box-shadow-spread-distance"}, "box-shadow-vertical-offset": {"dfnID":"box-shadow-vertical-offset","dfnText":"vertical offset","external":false,"refSections":[],"url":"#box-shadow-vertical-offset"}, "c0cc78c8": {"dfnID":"c0cc78c8","dfnText":"natural size","external":true,"refSections":[{"refs":[{"id":"ref-for-natural-size"},{"id":"ref-for-natural-size\u2460"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-natural-size\u2461"}],"title":"5.3. \nDrawing Areas: the border-image-width property"}],"url":"https://www.w3.org/TR/css-images-3/#natural-size"}, "c297b070": {"dfnID":"c297b070","dfnText":"#","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-comma"}],"title":"2.3. \nImage Sources: the background-image property"},{"refs":[{"id":"ref-for-mult-comma\u2460"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-mult-comma\u2461"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-mult-comma\u2462"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-mult-comma\u2463"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-mult-comma\u2464"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-mult-comma\u2465"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-mult-comma\u2466"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-mult-comma\u2467"}],"title":"6.1. Drop Shadows: the box-shadow property"}],"url":"https://www.w3.org/TR/css-values-4/#mult-comma"}, "c82a1380": {"dfnID":"c82a1380","dfnText":"default object size","external":true,"refSections":[{"refs":[{"id":"ref-for-default-object-size"}],"title":"5.2. \nImage Slicing: the border-image-slice property"}],"url":"https://www.w3.org/TR/css-images-3/#default-object-size"}, "c87746d2": {"dfnID":"c87746d2","dfnText":"<visual-box>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-visual-box"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-typedef-visual-box\u2460"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-typedef-visual-box\u2461"},{"id":"ref-for-typedef-visual-box\u2462"},{"id":"ref-for-typedef-visual-box\u2463"},{"id":"ref-for-typedef-visual-box\u2464"},{"id":"ref-for-typedef-visual-box\u2465"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-typedef-visual-box\u2466"}],"title":"8.1. \nChanges since the 14 February 2023 Candidate Recommendation Snapshot"}],"url":"https://www.w3.org/TR/css-box-4/#typedef-visual-box"}, "canvas-background": {"dfnID":"canvas-background","dfnText":"canvas background","external":false,"refSections":[{"refs":[{"id":"ref-for-canvas-background"},{"id":"ref-for-canvas-background\u2460"}],"title":"2.11. \nBackgrounds of Special Elements"}],"url":"#canvas-background"}, "canvas-surface": {"dfnID":"canvas-surface","dfnText":"canvas surface","external":false,"refSections":[{"refs":[{"id":"ref-for-canvas-surface"}],"title":"2.11. \nBackgrounds of Special Elements"}],"url":"#canvas-surface"}, "cba8daea": {"dfnID":"cba8daea","dfnText":"content edge","external":true,"refSections":[{"refs":[{"id":"ref-for-content-edge"}],"title":"4.2. \nCorner Shaping"},{"refs":[{"id":"ref-for-content-edge\u2460"},{"id":"ref-for-content-edge\u2461"}],"title":"4.3. \nCorner Clipping"}],"url":"https://www.w3.org/TR/css-box-4/#content-edge"}, "d04b6986": {"dfnID":"d04b6986","dfnText":"<color>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-color"}],"title":"2.2. \nBase Color: the background-color property"},{"refs":[{"id":"ref-for-typedef-color\u2460"},{"id":"ref-for-typedef-color\u2461"}],"title":"3.1. \nLine Colors: the border-color properties"},{"refs":[{"id":"ref-for-typedef-color\u2462"},{"id":"ref-for-typedef-color\u2463"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-typedef-color\u2464"},{"id":"ref-for-typedef-color\u2465"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-typedef-color\u2466"},{"id":"ref-for-typedef-color\u2467"},{"id":"ref-for-typedef-color\u2468"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"},{"refs":[{"id":"ref-for-typedef-color\u2460\u24ea"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-color-5/#typedef-color"}, "d4441b24": {"dfnID":"d4441b24","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"},{"id":"ref-for-mult-opt\u2460"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-mult-opt\u2461"},{"id":"ref-for-mult-opt\u2462"},{"id":"ref-for-mult-opt\u2463"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-mult-opt\u2464"}],"title":"4.1. \nCurve Radii: the border-radius properties"},{"refs":[{"id":"ref-for-mult-opt\u2465"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-mult-opt\u2466"},{"id":"ref-for-mult-opt\u2467"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"},{"refs":[{"id":"ref-for-mult-opt\u2468"},{"id":"ref-for-mult-opt\u2460\u24ea"},{"id":"ref-for-mult-opt\u2460\u2460"},{"id":"ref-for-mult-opt\u2460\u2461"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-mult-opt\u2460\u2462"},{"id":"ref-for-mult-opt\u2460\u2463"},{"id":"ref-for-mult-opt\u2460\u2464"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"https://www.w3.org/TR/css-values-4/#mult-opt"}, "d5e08d9c": {"dfnID":"d5e08d9c","dfnText":"specified value","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-value"},{"id":"ref-for-specified-value\u2460"}],"title":"2.6.1. \nSerialization of background-position values"}],"url":"https://www.w3.org/TR/css-cascade-5/#specified-value"}, "d65c0e81": {"dfnID":"d65c0e81","dfnText":"box fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-box-fragment"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-box-fragment\u2460"}],"title":"2.8. \nPositioning Area: the background-origin property"}],"url":"https://www.w3.org/TR/css-break-4/#box-fragment"}, "df86efcb": {"dfnID":"df86efcb","dfnText":"content area","external":true,"refSections":[{"refs":[{"id":"ref-for-content-area"},{"id":"ref-for-content-area\u2460"}],"title":"1. Introduction"}],"url":"https://www.w3.org/TR/css-box-4/#content-area"}, "e26aa9bf": {"dfnID":"e26aa9bf","dfnText":"initial containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-containing-block"}],"title":"2.8. \nPositioning Area: the background-origin property"}],"url":"https://www.w3.org/TR/css-display-3/#initial-containing-block"}, "e99a4517": {"dfnID":"e99a4517","dfnText":"specified size","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-size"}],"title":"5.2. \nImage Slicing: the border-image-slice property"}],"url":"https://www.w3.org/TR/css-images-3/#specified-size"}, "ef9e6926": {"dfnID":"ef9e6926","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"2.11. \nBackgrounds of Special Elements"},{"refs":[{"id":"ref-for-propdef-display\u2460"},{"id":"ref-for-propdef-display\u2461"}],"title":"8.2. \nChanges since the 22 December 2020 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-propdef-display\u2462"}],"title":"8.5. \nChanges since the 4 February 2014 Last Call Working Draft"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#propdef-display"}, "f3e8378c": {"dfnID":"f3e8378c","dfnText":"content","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-content"}],"title":"2.3. \nImage Sources: the background-image property"}],"url":"https://www.w3.org/TR/css-content-3/#propdef-content"}, "f72f5cb4": {"dfnID":"f72f5cb4","dfnText":"content box","external":true,"refSections":[{"refs":[{"id":"ref-for-content-box"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-content-box\u2460"}],"title":"2.8. \nPositioning Area: the background-origin property"}],"url":"https://www.w3.org/TR/css-box-4/#content-box"}, "ffedca23": {"dfnID":"ffedca23","dfnText":"natural aspect ratio","external":true,"refSections":[{"refs":[{"id":"ref-for-natural-aspect-ratio"},{"id":"ref-for-natural-aspect-ratio\u2460"},{"id":"ref-for-natural-aspect-ratio\u2461"}],"title":"2.9. Sizing Images: the background-size property"}],"url":"https://www.w3.org/TR/css-images-3/#natural-aspect-ratio"}, "propdef-background": {"dfnID":"propdef-background","dfnText":"background","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-propdef-background\u2460"},{"id":"ref-for-propdef-background\u2461"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background\u2462"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-background\u2463"}],"title":"7.2. \nLevel 2"},{"refs":[{"id":"ref-for-propdef-background\u2464"}],"title":"8.1. \nChanges since the 14 February 2023 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-propdef-background\u2465"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-background\u2466"}],"title":"8.8. \nChanges since the 14 February 2012 \u201cLast Call\u201d Working Draft"},{"refs":[{"id":"ref-for-propdef-background\u2467"}],"title":"8.10. \nChanges Since the 17 December 2009 Candidate Recommendation"}],"url":"#propdef-background"}, "propdef-background-attachment": {"dfnID":"propdef-background-attachment","dfnText":"background-attachment","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background-attachment"},{"id":"ref-for-propdef-background-attachment\u2460"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-propdef-background-attachment\u2461"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-propdef-background-attachment\u2462"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background-attachment\u2463"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-background-attachment\u2464"}],"title":"7.2. \nLevel 2"},{"refs":[{"id":"ref-for-propdef-background-attachment\u2465"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"}],"url":"#propdef-background-attachment"}, "propdef-background-clip": {"dfnID":"propdef-background-clip","dfnText":"background-clip","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background-clip"}],"title":"2.2. \nBase Color: the background-color property"},{"refs":[{"id":"ref-for-propdef-background-clip\u2460"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-propdef-background-clip\u2461"},{"id":"ref-for-propdef-background-clip\u2462"},{"id":"ref-for-propdef-background-clip\u2463"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-propdef-background-clip\u2464"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-propdef-background-clip\u2465"},{"id":"ref-for-propdef-background-clip\u2466"},{"id":"ref-for-propdef-background-clip\u2467"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background-clip\u2468"}],"title":"4.3. \nCorner Clipping"},{"refs":[{"id":"ref-for-propdef-background-clip\u2460\u24ea"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-background-clip\u2460\u2460"},{"id":"ref-for-propdef-background-clip\u2460\u2461"}],"title":"8.10. \nChanges Since the 17 December 2009 Candidate Recommendation"}],"url":"#propdef-background-clip"}, "propdef-background-color": {"dfnID":"propdef-background-color","dfnText":"background-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background-color"},{"id":"ref-for-propdef-background-color\u2460"}],"title":"2. \nBackgrounds"},{"refs":[{"id":"ref-for-propdef-background-color\u2461"}],"title":"2.2. \nBase Color: the background-color property"},{"refs":[{"id":"ref-for-propdef-background-color\u2462"}],"title":"2.3. \nImage Sources: the background-image property"},{"refs":[{"id":"ref-for-propdef-background-color\u2463"},{"id":"ref-for-propdef-background-color\u2464"},{"id":"ref-for-propdef-background-color\u2465"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background-color\u2466"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"},{"refs":[{"id":"ref-for-propdef-background-color\u2467"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-background-color\u2468"}],"title":"7.2. \nLevel 2"},{"refs":[{"id":"ref-for-propdef-background-color\u2460\u24ea"}],"title":"8.4. \nChanges since the 9 September 2014 Candidate Recommendation"}],"url":"#propdef-background-color"}, "propdef-background-image": {"dfnID":"propdef-background-image","dfnText":"background-image","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background-image"}],"title":"1.2. \nValue Definitions"},{"refs":[{"id":"ref-for-propdef-background-image\u2460"}],"title":"2. \nBackgrounds"},{"refs":[{"id":"ref-for-propdef-background-image\u2461"}],"title":"2.1. \nLayering Multiple Background Images"},{"refs":[{"id":"ref-for-propdef-background-image\u2462"},{"id":"ref-for-propdef-background-image\u2463"}],"title":"2.3. \nImage Sources: the background-image property"},{"refs":[{"id":"ref-for-propdef-background-image\u2464"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background-image\u2465"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"},{"refs":[{"id":"ref-for-propdef-background-image\u2466"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-background-image\u2467"}],"title":"7.2. \nLevel 2"},{"refs":[{"id":"ref-for-propdef-background-image\u2468"}],"title":"8.1. \nChanges since the 14 February 2023 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-propdef-background-image\u2460\u24ea"}],"title":"8.8. \nChanges since the 14 February 2012 \u201cLast Call\u201d Working Draft"}],"url":"#propdef-background-image"}, "propdef-background-origin": {"dfnID":"propdef-background-origin","dfnText":"background-origin","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background-origin"}],"title":"2.1. \nLayering Multiple Background Images"},{"refs":[{"id":"ref-for-propdef-background-origin\u2460"},{"id":"ref-for-propdef-background-origin\u2461"},{"id":"ref-for-propdef-background-origin\u2462"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-propdef-background-origin\u2463"},{"id":"ref-for-propdef-background-origin\u2464"},{"id":"ref-for-propdef-background-origin\u2465"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background-origin\u2466"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-background-origin\u2467"}],"title":"8.10. \nChanges Since the 17 December 2009 Candidate Recommendation"}],"url":"#propdef-background-origin"}, "propdef-background-position": {"dfnID":"propdef-background-position","dfnText":"background-position","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background-position"},{"id":"ref-for-propdef-background-position\u2460"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-propdef-background-position\u2461"},{"id":"ref-for-propdef-background-position\u2462"},{"id":"ref-for-propdef-background-position\u2463"},{"id":"ref-for-propdef-background-position\u2464"},{"id":"ref-for-propdef-background-position\u2465"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-propdef-background-position\u2466"}],"title":"2.6.1. \nSerialization of background-position values"},{"refs":[{"id":"ref-for-propdef-background-position\u2467"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-propdef-background-position\u2468"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background-position\u2460\u24ea"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-background-position\u2460\u2460"}],"title":"7.2. \nLevel 2"},{"refs":[{"id":"ref-for-propdef-background-position\u2460\u2461"}],"title":"8.1. \nChanges since the 14 February 2023 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-propdef-background-position\u2460\u2462"},{"id":"ref-for-propdef-background-position\u2460\u2463"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-background-position\u2460\u2464"}],"title":"8.7. \nChanges since the 17 April 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-background-position\u2460\u2465"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"#propdef-background-position"}, "propdef-background-repeat": {"dfnID":"propdef-background-repeat","dfnText":"background-repeat","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background-repeat"}],"title":"2.1. \nLayering Multiple Background Images"},{"refs":[{"id":"ref-for-propdef-background-repeat\u2460"},{"id":"ref-for-propdef-background-repeat\u2461"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-propdef-background-repeat\u2462"},{"id":"ref-for-propdef-background-repeat\u2463"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-propdef-background-repeat\u2464"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background-repeat\u2465"}],"title":"5.6. \nDrawing the Border Image"},{"refs":[{"id":"ref-for-propdef-background-repeat\u2466"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-background-repeat\u2467"}],"title":"7.2. \nLevel 2"},{"refs":[{"id":"ref-for-propdef-background-repeat\u2468"}],"title":"8.8. \nChanges since the 14 February 2012 \u201cLast Call\u201d Working Draft"}],"url":"#propdef-background-repeat"}, "propdef-background-size": {"dfnID":"propdef-background-size","dfnText":"background-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-background-size"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-propdef-background-size\u2460"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-propdef-background-size\u2461"},{"id":"ref-for-propdef-background-size\u2462"},{"id":"ref-for-propdef-background-size\u2463"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-propdef-background-size\u2464"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-propdef-background-size\u2465"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"#propdef-background-size"}, "propdef-border": {"dfnID":"propdef-border","dfnText":"border","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border\u2460"},{"id":"ref-for-propdef-border\u2461"},{"id":"ref-for-propdef-border\u2462"},{"id":"ref-for-propdef-border\u2463"},{"id":"ref-for-propdef-border\u2464"},{"id":"ref-for-propdef-border\u2465"},{"id":"ref-for-propdef-border\u2466"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-propdef-border\u2467"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-propdef-border\u2468"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-border\u2460\u24ea"}],"title":"7.2. \nLevel 2"}],"url":"#propdef-border"}, "propdef-border-bottom": {"dfnID":"propdef-border-bottom","dfnText":"border-bottom","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-border-bottom\u2460"}],"title":"7.2. \nLevel 2"}],"url":"#propdef-border-bottom"}, "propdef-border-bottom-color": {"dfnID":"propdef-border-bottom-color","dfnText":"border-bottom-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-color"}],"title":"3.1. \nLine Colors: the border-color properties"}],"url":"#propdef-border-bottom-color"}, "propdef-border-bottom-left-radius": {"dfnID":"propdef-border-bottom-left-radius","dfnText":"border-bottom-left-radius","external":false,"refSections":[],"url":"#propdef-border-bottom-left-radius"}, "propdef-border-bottom-right-radius": {"dfnID":"propdef-border-bottom-right-radius","dfnText":"border-bottom-right-radius","external":false,"refSections":[],"url":"#propdef-border-bottom-right-radius"}, "propdef-border-bottom-style": {"dfnID":"propdef-border-bottom-style","dfnText":"border-bottom-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-style"}],"title":"3.2. Line Patterns: the border-style properties"}],"url":"#propdef-border-bottom-style"}, "propdef-border-bottom-width": {"dfnID":"propdef-border-bottom-width","dfnText":"border-bottom-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-width"}],"title":"3.3. \nLine Thickness: the border-width properties"}],"url":"#propdef-border-bottom-width"}, "propdef-border-color": {"dfnID":"propdef-border-color","dfnText":"border-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-color"}],"title":"3. \nBorders"},{"refs":[{"id":"ref-for-propdef-border-color\u2460"},{"id":"ref-for-propdef-border-color\u2461"},{"id":"ref-for-propdef-border-color\u2462"}],"title":"3.1. \nLine Colors: the border-color properties"},{"refs":[{"id":"ref-for-propdef-border-color\u2463"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-propdef-border-color\u2464"},{"id":"ref-for-propdef-border-color\u2465"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-propdef-border-color\u2466"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-border-color\u2467"}],"title":"7.2. \nLevel 2"}],"url":"#propdef-border-color"}, "propdef-border-image": {"dfnID":"propdef-border-image","dfnText":"border-image","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-propdef-border-image\u2460"}],"title":"1.2. \nValue Definitions"},{"refs":[{"id":"ref-for-propdef-border-image\u2461"},{"id":"ref-for-propdef-border-image\u2462"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-propdef-border-image\u2463"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-propdef-border-image\u2464"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"},{"refs":[{"id":"ref-for-propdef-border-image\u2465"}],"title":"5.8. Effect on Tables"},{"refs":[{"id":"ref-for-propdef-border-image\u2466"}],"title":"6.1.1. \nShadow Shape, Spread, and Knockout"},{"refs":[{"id":"ref-for-propdef-border-image\u2467"}],"title":"8.8. \nChanges since the 14 February 2012 \u201cLast Call\u201d Working Draft"},{"refs":[{"id":"ref-for-propdef-border-image\u2468"}],"title":"9. Acknowledgments"}],"url":"#propdef-border-image"}, "propdef-border-image-outset": {"dfnID":"propdef-border-image-outset","dfnText":"border-image-outset","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image-outset"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-propdef-border-image-outset\u2460"}],"title":"5.4. \nEdge Overhang: the border-image-outset property"},{"refs":[{"id":"ref-for-propdef-border-image-outset\u2461"},{"id":"ref-for-propdef-border-image-outset\u2462"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"}],"url":"#propdef-border-image-outset"}, "propdef-border-image-repeat": {"dfnID":"propdef-border-image-repeat","dfnText":"border-image-repeat","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image-repeat"}],"title":"5.5. \nImage Tiling: the border-image-repeat property"},{"refs":[{"id":"ref-for-propdef-border-image-repeat\u2460"}],"title":"5.6. \nDrawing the Border Image"},{"refs":[{"id":"ref-for-propdef-border-image-repeat\u2461"},{"id":"ref-for-propdef-border-image-repeat\u2462"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"},{"refs":[{"id":"ref-for-propdef-border-image-repeat\u2463"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"#propdef-border-image-repeat"}, "propdef-border-image-slice": {"dfnID":"propdef-border-image-slice","dfnText":"border-image-slice","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image-slice"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-propdef-border-image-slice\u2460"}],"title":"5.1. \nImage Source: the border-image-source property"},{"refs":[{"id":"ref-for-propdef-border-image-slice\u2461"},{"id":"ref-for-propdef-border-image-slice\u2462"}],"title":"5.2. \nImage Slicing: the border-image-slice property"},{"refs":[{"id":"ref-for-propdef-border-image-slice\u2463"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-propdef-border-image-slice\u2464"}],"title":"5.6. \nDrawing the Border Image"},{"refs":[{"id":"ref-for-propdef-border-image-slice\u2465"},{"id":"ref-for-propdef-border-image-slice\u2466"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"}],"url":"#propdef-border-image-slice"}, "propdef-border-image-source": {"dfnID":"propdef-border-image-source","dfnText":"border-image-source","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image-source"},{"id":"ref-for-propdef-border-image-source\u2460"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-propdef-border-image-source\u2461"}],"title":"5.1. \nImage Source: the border-image-source property"},{"refs":[{"id":"ref-for-propdef-border-image-source\u2462"},{"id":"ref-for-propdef-border-image-source\u2463"}],"title":"5.6. \nDrawing the Border Image"},{"refs":[{"id":"ref-for-propdef-border-image-source\u2464"},{"id":"ref-for-propdef-border-image-source\u2465"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"}],"url":"#propdef-border-image-source"}, "propdef-border-image-width": {"dfnID":"propdef-border-image-width","dfnText":"border-image-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image-width"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-propdef-border-image-width\u2460"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-propdef-border-image-width\u2461"},{"id":"ref-for-propdef-border-image-width\u2462"},{"id":"ref-for-propdef-border-image-width\u2463"},{"id":"ref-for-propdef-border-image-width\u2464"},{"id":"ref-for-propdef-border-image-width\u2465"},{"id":"ref-for-propdef-border-image-width\u2466"},{"id":"ref-for-propdef-border-image-width\u2467"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-propdef-border-image-width\u2468"}],"title":"5.6. \nDrawing the Border Image"},{"refs":[{"id":"ref-for-propdef-border-image-width\u2460\u24ea"},{"id":"ref-for-propdef-border-image-width\u2460\u2460"},{"id":"ref-for-propdef-border-image-width\u2460\u2461"}],"title":"5.7. \nBorder Image Shorthand: the border-image property"},{"refs":[{"id":"ref-for-propdef-border-image-width\u2460\u2462"},{"id":"ref-for-propdef-border-image-width\u2460\u2463"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"}],"url":"#propdef-border-image-width"}, "propdef-border-left": {"dfnID":"propdef-border-left","dfnText":"border-left","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left"},{"id":"ref-for-propdef-border-left\u2460"},{"id":"ref-for-propdef-border-left\u2461"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-propdef-border-left\u2462"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-border-left\u2463"}],"title":"7.2. \nLevel 2"}],"url":"#propdef-border-left"}, "propdef-border-left-color": {"dfnID":"propdef-border-left-color","dfnText":"border-left-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-color"}],"title":"3.1. \nLine Colors: the border-color properties"}],"url":"#propdef-border-left-color"}, "propdef-border-left-style": {"dfnID":"propdef-border-left-style","dfnText":"border-left-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-style"}],"title":"3.2. Line Patterns: the border-style properties"}],"url":"#propdef-border-left-style"}, "propdef-border-left-width": {"dfnID":"propdef-border-left-width","dfnText":"border-left-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-width"}],"title":"3.3. \nLine Thickness: the border-width properties"}],"url":"#propdef-border-left-width"}, "propdef-border-radius": {"dfnID":"propdef-border-radius","dfnText":"border-radius","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-radius"}],"title":"2.7. \nPainting Area: the background-clip property"},{"refs":[{"id":"ref-for-propdef-border-radius\u2460"},{"id":"ref-for-propdef-border-radius\u2461"},{"id":"ref-for-propdef-border-radius\u2462"}],"title":"4.1. \nCurve Radii: the border-radius properties"},{"refs":[{"id":"ref-for-propdef-border-radius\u2463"},{"id":"ref-for-propdef-border-radius\u2464"},{"id":"ref-for-propdef-border-radius\u2465"}],"title":"4.3. \nCorner Clipping"},{"refs":[{"id":"ref-for-propdef-border-radius\u2466"}],"title":"4.6. \nEffect on Tables"},{"refs":[{"id":"ref-for-propdef-border-radius\u2467"}],"title":"8.1. \nChanges since the 14 February 2023 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-propdef-border-radius\u2468"}],"title":"8.4. \nChanges since the 9 September 2014 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-border-radius\u2460\u24ea"},{"id":"ref-for-propdef-border-radius\u2460\u2460"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-border-radius\u2460\u2461"}],"title":"8.7. \nChanges since the 17 April 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-border-radius\u2460\u2462"}],"title":"8.8. \nChanges since the 14 February 2012 \u201cLast Call\u201d Working Draft"},{"refs":[{"id":"ref-for-propdef-border-radius\u2460\u2463"}],"title":"8.10. \nChanges Since the 17 December 2009 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-border-radius\u2460\u2464"}],"title":"9. Acknowledgments"}],"url":"#propdef-border-radius"}, "propdef-border-right": {"dfnID":"propdef-border-right","dfnText":"border-right","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-border-right\u2460"}],"title":"7.2. \nLevel 2"}],"url":"#propdef-border-right"}, "propdef-border-right-color": {"dfnID":"propdef-border-right-color","dfnText":"border-right-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-color"}],"title":"3.1. \nLine Colors: the border-color properties"}],"url":"#propdef-border-right-color"}, "propdef-border-right-style": {"dfnID":"propdef-border-right-style","dfnText":"border-right-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-style"}],"title":"3.2. Line Patterns: the border-style properties"}],"url":"#propdef-border-right-style"}, "propdef-border-right-width": {"dfnID":"propdef-border-right-width","dfnText":"border-right-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-width"}],"title":"3.3. \nLine Thickness: the border-width properties"}],"url":"#propdef-border-right-width"}, "propdef-border-style": {"dfnID":"propdef-border-style","dfnText":"border-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-style"}],"title":"3. \nBorders"},{"refs":[{"id":"ref-for-propdef-border-style\u2460"}],"title":"3.1. \nLine Colors: the border-color properties"},{"refs":[{"id":"ref-for-propdef-border-style\u2461"},{"id":"ref-for-propdef-border-style\u2462"},{"id":"ref-for-propdef-border-style\u2463"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-propdef-border-style\u2464"},{"id":"ref-for-propdef-border-style\u2465"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-propdef-border-style\u2466"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-propdef-border-style\u2467"},{"id":"ref-for-propdef-border-style\u2468"}],"title":"5.1. \nImage Source: the border-image-source property"},{"refs":[{"id":"ref-for-propdef-border-style\u2460\u24ea"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-border-style\u2460\u2460"}],"title":"7.2. \nLevel 2"},{"refs":[{"id":"ref-for-propdef-border-style\u2460\u2461"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"}],"url":"#propdef-border-style"}, "propdef-border-top": {"dfnID":"propdef-border-top","dfnText":"border-top","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-border-top\u2460"}],"title":"7.2. \nLevel 2"}],"url":"#propdef-border-top"}, "propdef-border-top-color": {"dfnID":"propdef-border-top-color","dfnText":"border-top-color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-color"}],"title":"3.1. \nLine Colors: the border-color properties"}],"url":"#propdef-border-top-color"}, "propdef-border-top-left-radius": {"dfnID":"propdef-border-top-left-radius","dfnText":"border-top-left-radius","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-left-radius"}],"title":"4.1. \nCurve Radii: the border-radius properties"}],"url":"#propdef-border-top-left-radius"}, "propdef-border-top-right-radius": {"dfnID":"propdef-border-top-right-radius","dfnText":"border-top-right-radius","external":false,"refSections":[],"url":"#propdef-border-top-right-radius"}, "propdef-border-top-style": {"dfnID":"propdef-border-top-style","dfnText":"border-top-style","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-style"}],"title":"3.2. Line Patterns: the border-style properties"}],"url":"#propdef-border-top-style"}, "propdef-border-top-width": {"dfnID":"propdef-border-top-width","dfnText":"border-top-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-width"}],"title":"3.3. \nLine Thickness: the border-width properties"}],"url":"#propdef-border-top-width"}, "propdef-border-width": {"dfnID":"propdef-border-width","dfnText":"border-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-border-width"}],"title":"3. \nBorders"},{"refs":[{"id":"ref-for-propdef-border-width\u2460"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-propdef-border-width\u2461"},{"id":"ref-for-propdef-border-width\u2462"},{"id":"ref-for-propdef-border-width\u2463"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-propdef-border-width\u2464"},{"id":"ref-for-propdef-border-width\u2465"}],"title":"3.4. \nBorder Shorthand Properties"},{"refs":[{"id":"ref-for-propdef-border-width\u2466"},{"id":"ref-for-propdef-border-width\u2467"}],"title":"5. \nBorder Images"},{"refs":[{"id":"ref-for-propdef-border-width\u2468"}],"title":"5.3. \nDrawing Areas: the border-image-width property"},{"refs":[{"id":"ref-for-propdef-border-width\u2460\u24ea"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-propdef-border-width\u2460\u2460"}],"title":"7.2. \nLevel 2"},{"refs":[{"id":"ref-for-propdef-border-width\u2460\u2461"}],"title":"8.2. \nChanges since the 22 December 2020 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-propdef-border-width\u2460\u2462"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-border-width\u2460\u2463"}],"title":"8.8. \nChanges since the 14 February 2012 \u201cLast Call\u201d Working Draft"},{"refs":[{"id":"ref-for-propdef-border-width\u2460\u2464"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"#propdef-border-width"}, "propdef-box-shadow": {"dfnID":"propdef-box-shadow","dfnText":"box-shadow","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-box-shadow\u2460"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-propdef-box-shadow\u2461"}],"title":"1.1. \nModule Interactions"},{"refs":[{"id":"ref-for-propdef-box-shadow\u2462"},{"id":"ref-for-propdef-box-shadow\u2463"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-propdef-box-shadow\u2464"}],"title":"8.4. \nChanges since the 9 September 2014 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-box-shadow\u2465"},{"id":"ref-for-propdef-box-shadow\u2466"},{"id":"ref-for-propdef-box-shadow\u2467"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"},{"refs":[{"id":"ref-for-propdef-box-shadow\u2468"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"#propdef-box-shadow"}, "shadow-blur-radius": {"dfnID":"shadow-blur-radius","dfnText":"3rd <length [0,\u221e]>","external":false,"refSections":[],"url":"#shadow-blur-radius"}, "shadow-color": {"dfnID":"shadow-color","dfnText":"<color>","external":false,"refSections":[],"url":"#shadow-color"}, "shadow-inset": {"dfnID":"shadow-inset","dfnText":"inset","external":false,"refSections":[{"refs":[{"id":"ref-for-shadow-inset"},{"id":"ref-for-shadow-inset\u2460"},{"id":"ref-for-shadow-inset\u2461"},{"id":"ref-for-shadow-inset\u2462"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-shadow-inset\u2463"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"}],"url":"#shadow-inset"}, "shadow-offset-x": {"dfnID":"shadow-offset-x","dfnText":"1st <length>","external":false,"refSections":[],"url":"#shadow-offset-x"}, "shadow-offset-y": {"dfnID":"shadow-offset-y","dfnText":"2nd <length>","external":false,"refSections":[],"url":"#shadow-offset-y"}, "shadow-spread-distance": {"dfnID":"shadow-spread-distance","dfnText":"4th <length>","external":false,"refSections":[],"url":"#shadow-spread-distance"}, "typedef-attachment": {"dfnID":"typedef-attachment","dfnText":"<attachment>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-attachment"},{"id":"ref-for-typedef-attachment\u2460"},{"id":"ref-for-typedef-attachment\u2461"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-typedef-attachment\u2462"},{"id":"ref-for-typedef-attachment\u2463"}],"title":"2.10. \nBackgrounds Shorthand: the background property"}],"url":"#typedef-attachment"}, "typedef-bg-image": {"dfnID":"typedef-bg-image","dfnText":"<bg-image>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-bg-image"},{"id":"ref-for-typedef-bg-image\u2460"},{"id":"ref-for-typedef-bg-image\u2461"}],"title":"2.3. \nImage Sources: the background-image property"},{"refs":[{"id":"ref-for-typedef-bg-image\u2462"},{"id":"ref-for-typedef-bg-image\u2463"}],"title":"2.10. \nBackgrounds Shorthand: the background property"}],"url":"#typedef-bg-image"}, "typedef-bg-layer": {"dfnID":"typedef-bg-layer","dfnText":"<bg-layer>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-bg-layer"},{"id":"ref-for-typedef-bg-layer\u2460"}],"title":"2.10. \nBackgrounds Shorthand: the background property"}],"url":"#typedef-bg-layer"}, "typedef-bg-position": {"dfnID":"typedef-bg-position","dfnText":"<bg-position>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-bg-position"},{"id":"ref-for-typedef-bg-position\u2460"},{"id":"ref-for-typedef-bg-position\u2461"}],"title":"2.6. Positioning Images: the background-position property"},{"refs":[{"id":"ref-for-typedef-bg-position\u2462"}],"title":"2.6.1. \nSerialization of background-position values"},{"refs":[{"id":"ref-for-typedef-bg-position\u2463"},{"id":"ref-for-typedef-bg-position\u2464"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-typedef-bg-position\u2465"}],"title":"8.4. \nChanges since the 9 September 2014 Candidate Recommendation"}],"url":"#typedef-bg-position"}, "typedef-bg-size": {"dfnID":"typedef-bg-size","dfnText":"<bg-size>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-bg-size"},{"id":"ref-for-typedef-bg-size\u2460"},{"id":"ref-for-typedef-bg-size\u2461"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-typedef-bg-size\u2462"},{"id":"ref-for-typedef-bg-size\u2463"}],"title":"2.10. \nBackgrounds Shorthand: the background property"}],"url":"#typedef-bg-size"}, "typedef-final-bg-layer": {"dfnID":"typedef-final-bg-layer","dfnText":"<final-bg-layer>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-final-bg-layer"},{"id":"ref-for-typedef-final-bg-layer\u2460"}],"title":"2.10. \nBackgrounds Shorthand: the background property"},{"refs":[{"id":"ref-for-typedef-final-bg-layer\u2461"}],"title":"8.4. \nChanges since the 9 September 2014 Candidate Recommendation"}],"url":"#typedef-final-bg-layer"}, "typedef-line-style": {"dfnID":"typedef-line-style","dfnText":"<line-style>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-line-style"},{"id":"ref-for-typedef-line-style\u2460"},{"id":"ref-for-typedef-line-style\u2461"},{"id":"ref-for-typedef-line-style\u2462"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-typedef-line-style\u2463"},{"id":"ref-for-typedef-line-style\u2464"}],"title":"3.4. \nBorder Shorthand Properties"}],"url":"#typedef-line-style"}, "typedef-line-width": {"dfnID":"typedef-line-width","dfnText":"<line-width>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-line-width"},{"id":"ref-for-typedef-line-width\u2460"},{"id":"ref-for-typedef-line-width\u2461"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-typedef-line-width\u2462"},{"id":"ref-for-typedef-line-width\u2463"}],"title":"3.4. \nBorder Shorthand Properties"}],"url":"#typedef-line-width"}, "typedef-repeat-style": {"dfnID":"typedef-repeat-style","dfnText":"<repeat-style>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-repeat-style"},{"id":"ref-for-typedef-repeat-style\u2460"},{"id":"ref-for-typedef-repeat-style\u2461"},{"id":"ref-for-typedef-repeat-style\u2462"},{"id":"ref-for-typedef-repeat-style\u2463"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-typedef-repeat-style\u2464"},{"id":"ref-for-typedef-repeat-style\u2465"}],"title":"2.10. \nBackgrounds Shorthand: the background property"}],"url":"#typedef-repeat-style"}, "typedef-shadow": {"dfnID":"typedef-shadow","dfnText":"<shadow>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-shadow"},{"id":"ref-for-typedef-shadow\u2460"},{"id":"ref-for-typedef-shadow\u2461"},{"id":"ref-for-typedef-shadow\u2462"}],"title":"6.1. Drop Shadows: the box-shadow property"},{"refs":[{"id":"ref-for-typedef-shadow\u2463"},{"id":"ref-for-typedef-shadow\u2464"},{"id":"ref-for-typedef-shadow\u2465"}],"title":"8.3. \nChanges since the 17 October 2017 Candidate Recommendation"}],"url":"#typedef-shadow"}, "valdef-background-attachment-fixed": {"dfnID":"valdef-background-attachment-fixed","dfnText":"fixed","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-attachment-fixed"},{"id":"ref-for-valdef-background-attachment-fixed\u2460"},{"id":"ref-for-valdef-background-attachment-fixed\u2461"},{"id":"ref-for-valdef-background-attachment-fixed\u2462"},{"id":"ref-for-valdef-background-attachment-fixed\u2463"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-valdef-background-attachment-fixed\u2464"}],"title":"2.8. \nPositioning Area: the background-origin property"},{"refs":[{"id":"ref-for-valdef-background-attachment-fixed\u2465"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-valdef-background-attachment-fixed\u2466"}],"title":"7.2. \nLevel 2"}],"url":"#valdef-background-attachment-fixed"}, "valdef-background-attachment-local": {"dfnID":"valdef-background-attachment-local","dfnText":"local","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-attachment-local"}],"title":"2.5. \nAffixing Images: the background-attachment property"}],"url":"#valdef-background-attachment-local"}, "valdef-background-attachment-scroll": {"dfnID":"valdef-background-attachment-scroll","dfnText":"scroll","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-attachment-scroll"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-valdef-background-attachment-scroll\u2460"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-valdef-background-attachment-scroll\u2461"}],"title":"7.2. \nLevel 2"}],"url":"#valdef-background-attachment-scroll"}, "valdef-background-clip-border-box": {"dfnID":"valdef-background-clip-border-box","dfnText":"border-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-clip-border-box"}],"title":"2.5. \nAffixing Images: the background-attachment property"}],"url":"#valdef-background-clip-border-box"}, "valdef-background-clip-content-box": {"dfnID":"valdef-background-clip-content-box","dfnText":"content-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-clip-content-box"}],"title":"8.10. \nChanges Since the 17 December 2009 Candidate Recommendation"}],"url":"#valdef-background-clip-content-box"}, "valdef-background-clip-padding-box": {"dfnID":"valdef-background-clip-padding-box","dfnText":"padding-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-clip-padding-box"}],"title":"2.5. \nAffixing Images: the background-attachment property"},{"refs":[{"id":"ref-for-valdef-background-clip-padding-box\u2460"}],"title":"2.8. \nPositioning Area: the background-origin property"}],"url":"#valdef-background-clip-padding-box"}, "valdef-background-image-none": {"dfnID":"valdef-background-image-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-image-none"}],"title":"2.1. \nLayering Multiple Background Images"},{"refs":[{"id":"ref-for-valdef-background-image-none\u2460"}],"title":"2.3. \nImage Sources: the background-image property"},{"refs":[{"id":"ref-for-valdef-background-image-none\u2461"}],"title":"2.11.2. \nThe Canvas Background and the HTML <body> Element"}],"url":"#valdef-background-image-none"}, "valdef-background-origin-border-box": {"dfnID":"valdef-background-origin-border-box","dfnText":"border-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-origin-border-box"}],"title":"2.8. \nPositioning Area: the background-origin property"}],"url":"#valdef-background-origin-border-box"}, "valdef-background-origin-content-box": {"dfnID":"valdef-background-origin-content-box","dfnText":"content-box","external":false,"refSections":[],"url":"#valdef-background-origin-content-box"}, "valdef-background-origin-padding-box": {"dfnID":"valdef-background-origin-padding-box","dfnText":"padding-box","external":false,"refSections":[],"url":"#valdef-background-origin-padding-box"}, "valdef-background-position-bottom": {"dfnID":"valdef-background-position-bottom","dfnText":"bottom","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-position-bottom"}],"title":"2.6. Positioning Images: the background-position property"}],"url":"#valdef-background-position-bottom"}, "valdef-background-position-center": {"dfnID":"valdef-background-position-center","dfnText":"center","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-position-center"},{"id":"ref-for-valdef-background-position-center\u2460"}],"title":"2.6. Positioning Images: the background-position property"}],"url":"#valdef-background-position-center"}, "valdef-background-position-left": {"dfnID":"valdef-background-position-left","dfnText":"left","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-position-left"}],"title":"2.6. Positioning Images: the background-position property"}],"url":"#valdef-background-position-left"}, "valdef-background-position-length": {"dfnID":"valdef-background-position-length","dfnText":"<length>","external":false,"refSections":[],"url":"#valdef-background-position-length"}, "valdef-background-position-percentage": {"dfnID":"valdef-background-position-percentage","dfnText":"<percentage>","external":false,"refSections":[],"url":"#valdef-background-position-percentage"}, "valdef-background-position-right": {"dfnID":"valdef-background-position-right","dfnText":"right","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-position-right"}],"title":"2.6. Positioning Images: the background-position property"}],"url":"#valdef-background-position-right"}, "valdef-background-position-top": {"dfnID":"valdef-background-position-top","dfnText":"top","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-position-top"}],"title":"2.6. Positioning Images: the background-position property"}],"url":"#valdef-background-position-top"}, "valdef-background-repeat-no-repeat": {"dfnID":"valdef-background-repeat-no-repeat","dfnText":"no-repeat","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-repeat-no-repeat"},{"id":"ref-for-valdef-background-repeat-no-repeat\u2460"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-valdef-background-repeat-no-repeat\u2461"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-valdef-background-repeat-no-repeat\u2462"}],"title":"7.2. \nLevel 2"}],"url":"#valdef-background-repeat-no-repeat"}, "valdef-background-repeat-repeat": {"dfnID":"valdef-background-repeat-repeat","dfnText":"repeat","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-repeat-repeat"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-valdef-background-repeat-repeat\u2460"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-valdef-background-repeat-repeat\u2461"}],"title":"7.2. \nLevel 2"}],"url":"#valdef-background-repeat-repeat"}, "valdef-background-repeat-repeat-x": {"dfnID":"valdef-background-repeat-repeat-x","dfnText":"repeat-x","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-repeat-repeat-x"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-valdef-background-repeat-repeat-x\u2460"}],"title":"7.2. \nLevel 2"}],"url":"#valdef-background-repeat-repeat-x"}, "valdef-background-repeat-repeat-y": {"dfnID":"valdef-background-repeat-repeat-y","dfnText":"repeat-y","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-repeat-repeat-y"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-valdef-background-repeat-repeat-y\u2460"}],"title":"7.1. \nLevel 1"},{"refs":[{"id":"ref-for-valdef-background-repeat-repeat-y\u2461"}],"title":"7.2. \nLevel 2"}],"url":"#valdef-background-repeat-repeat-y"}, "valdef-background-repeat-round": {"dfnID":"valdef-background-repeat-round","dfnText":"round","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-repeat-round"}],"title":"2.4. \nTiling Images: the background-repeat property"},{"refs":[{"id":"ref-for-valdef-background-repeat-round\u2460"},{"id":"ref-for-valdef-background-repeat-round\u2461"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-valdef-background-repeat-round\u2462"}],"title":"5.6. \nDrawing the Border Image"}],"url":"#valdef-background-repeat-round"}, "valdef-background-repeat-space": {"dfnID":"valdef-background-repeat-space","dfnText":"space","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-repeat-space"},{"id":"ref-for-valdef-background-repeat-space\u2460"}],"title":"2.4. \nTiling Images: the background-repeat property"}],"url":"#valdef-background-repeat-space"}, "valdef-background-size-auto": {"dfnID":"valdef-background-size-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-size-auto"},{"id":"ref-for-valdef-background-size-auto\u2460"},{"id":"ref-for-valdef-background-size-auto\u2461"},{"id":"ref-for-valdef-background-size-auto\u2462"},{"id":"ref-for-valdef-background-size-auto\u2463"}],"title":"2.9. Sizing Images: the background-size property"},{"refs":[{"id":"ref-for-valdef-background-size-auto\u2464"},{"id":"ref-for-valdef-background-size-auto\u2465"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"#valdef-background-size-auto"}, "valdef-background-size-contain": {"dfnID":"valdef-background-size-contain","dfnText":"contain","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-background-size-contain"}],"title":"2.9. Sizing Images: the background-size property"}],"url":"#valdef-background-size-contain"}, "valdef-background-size-cover": {"dfnID":"valdef-background-size-cover","dfnText":"cover","external":false,"refSections":[],"url":"#valdef-background-size-cover"}, "valdef-background-size-length-percentage-0": {"dfnID":"valdef-background-size-length-percentage-0","dfnText":"<length-percentage [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-background-size-length-percentage-0"}, "valdef-border-image-repeat-repeat": {"dfnID":"valdef-border-image-repeat-repeat","dfnText":"repeat","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-border-image-repeat-repeat"},{"id":"ref-for-valdef-border-image-repeat-repeat\u2460"},{"id":"ref-for-valdef-border-image-repeat-repeat\u2461"},{"id":"ref-for-valdef-border-image-repeat-repeat\u2462"}],"title":"5.6. \nDrawing the Border Image"}],"url":"#valdef-border-image-repeat-repeat"}, "valdef-border-image-repeat-round": {"dfnID":"valdef-border-image-repeat-round","dfnText":"round","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-border-image-repeat-round"},{"id":"ref-for-valdef-border-image-repeat-round\u2460"}],"title":"5.6. \nDrawing the Border Image"}],"url":"#valdef-border-image-repeat-round"}, "valdef-border-image-repeat-space": {"dfnID":"valdef-border-image-repeat-space","dfnText":"space","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-border-image-repeat-space"},{"id":"ref-for-valdef-border-image-repeat-space\u2460"},{"id":"ref-for-valdef-border-image-repeat-space\u2461"}],"title":"5.6. \nDrawing the Border Image"},{"refs":[{"id":"ref-for-valdef-border-image-repeat-space\u2462"}],"title":"8.9. \nChanges Since the 15 February 2011 Candidate Recommendation"}],"url":"#valdef-border-image-repeat-space"}, "valdef-border-image-repeat-stretch": {"dfnID":"valdef-border-image-repeat-stretch","dfnText":"stretch","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-border-image-repeat-stretch"},{"id":"ref-for-valdef-border-image-repeat-stretch\u2460"}],"title":"5.6. \nDrawing the Border Image"}],"url":"#valdef-border-image-repeat-stretch"}, "valdef-border-image-slice-number-0": {"dfnID":"valdef-border-image-slice-number-0","dfnText":"<number [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-border-image-slice-number-0"}, "valdef-border-image-slice-percentage-0": {"dfnID":"valdef-border-image-slice-percentage-0","dfnText":"<percentage [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-border-image-slice-percentage-0"}, "valdef-border-image-width-auto": {"dfnID":"valdef-border-image-width-auto","dfnText":"auto","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-border-image-width-auto"},{"id":"ref-for-valdef-border-image-width-auto\u2460"}],"title":"5.3. \nDrawing Areas: the border-image-width property"}],"url":"#valdef-border-image-width-auto"}, "valdef-border-image-width-length-percentage-0": {"dfnID":"valdef-border-image-width-length-percentage-0","dfnText":"<length-percentage [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-border-image-width-length-percentage-0"}, "valdef-border-image-width-number-0": {"dfnID":"valdef-border-image-width-number-0","dfnText":"<number [0,\u221e]>","external":false,"refSections":[],"url":"#valdef-border-image-width-number-0"}, "valdef-line-style-dashed": {"dfnID":"valdef-line-style-dashed","dfnText":"dashed","external":false,"refSections":[],"url":"#valdef-line-style-dashed"}, "valdef-line-style-dotted": {"dfnID":"valdef-line-style-dotted","dfnText":"dotted","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-dotted"}],"title":"4.2. \nCorner Shaping"}],"url":"#valdef-line-style-dotted"}, "valdef-line-style-double": {"dfnID":"valdef-line-style-double","dfnText":"double","external":false,"refSections":[],"url":"#valdef-line-style-double"}, "valdef-line-style-groove": {"dfnID":"valdef-line-style-groove","dfnText":"groove","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-groove"},{"id":"ref-for-valdef-line-style-groove\u2460"}],"title":"3.2. Line Patterns: the border-style properties"}],"url":"#valdef-line-style-groove"}, "valdef-line-style-hidden": {"dfnID":"valdef-line-style-hidden","dfnText":"hidden","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-hidden"}],"title":"3.3. \nLine Thickness: the border-width properties"}],"url":"#valdef-line-style-hidden"}, "valdef-line-style-inset": {"dfnID":"valdef-line-style-inset","dfnText":"inset","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-inset"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-valdef-line-style-inset\u2460"}],"title":"4.2. \nCorner Shaping"}],"url":"#valdef-line-style-inset"}, "valdef-line-style-none": {"dfnID":"valdef-line-style-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-none"}],"title":"3.2. Line Patterns: the border-style properties"},{"refs":[{"id":"ref-for-valdef-line-style-none\u2460"},{"id":"ref-for-valdef-line-style-none\u2461"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-valdef-line-style-none\u2462"}],"title":"8.6. \nChanges since the 24 July 2012 Candidate Recommendation"}],"url":"#valdef-line-style-none"}, "valdef-line-style-outset": {"dfnID":"valdef-line-style-outset","dfnText":"outset","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-outset"}],"title":"3.2. Line Patterns: the border-style properties"}],"url":"#valdef-line-style-outset"}, "valdef-line-style-ridge": {"dfnID":"valdef-line-style-ridge","dfnText":"ridge","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-ridge"},{"id":"ref-for-valdef-line-style-ridge\u2460"}],"title":"3.2. Line Patterns: the border-style properties"}],"url":"#valdef-line-style-ridge"}, "valdef-line-style-solid": {"dfnID":"valdef-line-style-solid","dfnText":"solid","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-solid"}],"title":"4.2. \nCorner Shaping"}],"url":"#valdef-line-style-solid"}, "valdef-line-width-medium": {"dfnID":"valdef-line-width-medium","dfnText":"medium","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-width-medium"}],"title":"3.3. \nLine Thickness: the border-width properties"},{"refs":[{"id":"ref-for-valdef-line-width-medium\u2460"}],"title":"8.2. \nChanges since the 22 December 2020 Candidate Recommendation Snapshot"}],"url":"#valdef-line-width-medium"}, "valdef-line-width-thick": {"dfnID":"valdef-line-width-thick","dfnText":"thick","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-width-thick"}],"title":"8.2. \nChanges since the 22 December 2020 Candidate Recommendation Snapshot"}],"url":"#valdef-line-width-thick"}, "valdef-line-width-thin": {"dfnID":"valdef-line-width-thin","dfnText":"thin","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-line-width-thin"}],"title":"8.2. \nChanges since the 22 December 2020 Candidate Recommendation Snapshot"}],"url":"#valdef-line-width-thin"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "#typedef-line-style": "Expands to: dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid", "#typedef-line-width": "Expands to: medium | thick | thin", "https://www.w3.org/TR/css-box-4/#typedef-visual-box": "Expands to: border-box | content-box | padding-box", "https://www.w3.org/TR/css-color-5/#typedef-color": "Expands to: <alpha-value> | accentcolor | accentcolortext | activeborder | activecaption | activetext | aliceblue | antiquewhite | appworkspace | aqua | aquamarine | azure | background | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | buttonborder | buttonface | buttonhighlight | buttonshadow | buttontext | cadetblue | canvas | canvastext | captiontext | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | field | fieldtext | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | graytext | green | greenyellow | grey | highlight | highlighttext | honeydew | hotpink | inactiveborder | inactivecaption | inactivecaptiontext | indianred | indigo | infobackground | infotext | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | linktext | magenta | mark | marktext | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | menu | menutext | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | scrollbar | seagreen | seashell | selecteditem | selecteditemtext | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | threeddarkshadow | threedface | threedhighlight | threedlightshadow | threedshadow | tomato | transparent | turquoise | violet | visitedtext | wheat | white | whitesmoke | window | windowframe | windowtext | yellow | yellowgreen", "https://www.w3.org/TR/css-values-4/#length-value": "Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | q | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#background-color-layer": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background color","type":"dfn","url":"#background-color-layer"}, "#background-image-layer": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"layer","type":"dfn","url":"#background-image-layer"}, "#background-images": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background image","type":"dfn","url":"#background-images"}, "#background-painting-area": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background painting area","type":"dfn","url":"#background-painting-area"}, "#background-positioning-area": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background positioning area","type":"dfn","url":"#background-positioning-area"}, "#border-image-area": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border image area","type":"dfn","url":"#border-image-area"}, "#border-image-dfn": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border image","type":"dfn","url":"#border-image-dfn"}, "#border-image-region": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"region","type":"dfn","url":"#border-image-region"}, "#border-image-slice-fill": {"export":true,"for_":["border-image-slice"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"fill","type":"value","url":"#border-image-slice-fill"}, "#border-radii": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border radius","type":"dfn","url":"#border-radii"}, "#border-width-dfn": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border width","type":"dfn","url":"#border-width-dfn"}, "#box-shadow-blur-radius": {"export":true,"for_":["box-shadow"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"blur radius","type":"dfn","url":"#box-shadow-blur-radius"}, "#box-shadow-inner-box-shadow": {"export":true,"for_":["box-shadow"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"inner box-shadow","type":"dfn","url":"#box-shadow-inner-box-shadow"}, "#box-shadow-none": {"export":true,"for_":["box-shadow"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"none","type":"value","url":"#box-shadow-none"}, "#box-shadow-outer-box-shadow": {"export":true,"for_":["box-shadow"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"outer box-shadow","type":"dfn","url":"#box-shadow-outer-box-shadow"}, "#box-shadow-spread-distance": {"export":true,"for_":["box-shadow"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"spread distance","type":"dfn","url":"#box-shadow-spread-distance"}, "#canvas-background": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"canvas background","type":"dfn","url":"#canvas-background"}, "#canvas-surface": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"canvas surface","type":"dfn","url":"#canvas-surface"}, "#propdef-background": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background","type":"property","url":"#propdef-background"}, "#propdef-background-attachment": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background-attachment","type":"property","url":"#propdef-background-attachment"}, "#propdef-background-clip": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background-clip","type":"property","url":"#propdef-background-clip"}, "#propdef-background-color": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background-color","type":"property","url":"#propdef-background-color"}, "#propdef-background-image": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background-image","type":"property","url":"#propdef-background-image"}, "#propdef-background-origin": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background-origin","type":"property","url":"#propdef-background-origin"}, "#propdef-background-position": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background-position","type":"property","url":"#propdef-background-position"}, "#propdef-background-repeat": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background-repeat","type":"property","url":"#propdef-background-repeat"}, "#propdef-background-size": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"background-size","type":"property","url":"#propdef-background-size"}, "#propdef-border": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border","type":"property","url":"#propdef-border"}, "#propdef-border-bottom": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-bottom","type":"property","url":"#propdef-border-bottom"}, "#propdef-border-bottom-color": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-bottom-color","type":"property","url":"#propdef-border-bottom-color"}, "#propdef-border-bottom-left-radius": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-bottom-left-radius","type":"property","url":"#propdef-border-bottom-left-radius"}, "#propdef-border-bottom-right-radius": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-bottom-right-radius","type":"property","url":"#propdef-border-bottom-right-radius"}, "#propdef-border-bottom-style": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-bottom-style","type":"property","url":"#propdef-border-bottom-style"}, "#propdef-border-bottom-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-bottom-width","type":"property","url":"#propdef-border-bottom-width"}, "#propdef-border-color": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-color","type":"property","url":"#propdef-border-color"}, "#propdef-border-image": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-image","type":"property","url":"#propdef-border-image"}, "#propdef-border-image-outset": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-image-outset","type":"property","url":"#propdef-border-image-outset"}, "#propdef-border-image-repeat": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-image-repeat","type":"property","url":"#propdef-border-image-repeat"}, "#propdef-border-image-slice": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-image-slice","type":"property","url":"#propdef-border-image-slice"}, "#propdef-border-image-source": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-image-source","type":"property","url":"#propdef-border-image-source"}, "#propdef-border-image-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-image-width","type":"property","url":"#propdef-border-image-width"}, "#propdef-border-left": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-left","type":"property","url":"#propdef-border-left"}, "#propdef-border-left-color": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-left-color","type":"property","url":"#propdef-border-left-color"}, "#propdef-border-left-style": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-left-style","type":"property","url":"#propdef-border-left-style"}, "#propdef-border-left-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-left-width","type":"property","url":"#propdef-border-left-width"}, "#propdef-border-radius": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-radius","type":"property","url":"#propdef-border-radius"}, "#propdef-border-right": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-right","type":"property","url":"#propdef-border-right"}, "#propdef-border-right-color": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-right-color","type":"property","url":"#propdef-border-right-color"}, "#propdef-border-right-style": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-right-style","type":"property","url":"#propdef-border-right-style"}, "#propdef-border-right-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-right-width","type":"property","url":"#propdef-border-right-width"}, "#propdef-border-style": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-style","type":"property","url":"#propdef-border-style"}, "#propdef-border-top": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-top","type":"property","url":"#propdef-border-top"}, "#propdef-border-top-color": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-top-color","type":"property","url":"#propdef-border-top-color"}, "#propdef-border-top-left-radius": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-top-left-radius","type":"property","url":"#propdef-border-top-left-radius"}, "#propdef-border-top-right-radius": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-top-right-radius","type":"property","url":"#propdef-border-top-right-radius"}, "#propdef-border-top-style": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-top-style","type":"property","url":"#propdef-border-top-style"}, "#propdef-border-top-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-top-width","type":"property","url":"#propdef-border-top-width"}, "#propdef-border-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-width","type":"property","url":"#propdef-border-width"}, "#propdef-box-shadow": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"box-shadow","type":"property","url":"#propdef-box-shadow"}, "#shadow-inset": {"export":true,"for_":["box-shadow"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"inset","type":"value","url":"#shadow-inset"}, "#typedef-attachment": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<attachment>","type":"type","url":"#typedef-attachment"}, "#typedef-bg-image": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<bg-image>","type":"type","url":"#typedef-bg-image"}, "#typedef-bg-layer": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<bg-layer>","type":"type","url":"#typedef-bg-layer"}, "#typedef-bg-position": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<bg-position>","type":"type","url":"#typedef-bg-position"}, "#typedef-bg-size": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<bg-size>","type":"type","url":"#typedef-bg-size"}, "#typedef-final-bg-layer": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<final-bg-layer>","type":"type","url":"#typedef-final-bg-layer"}, "#typedef-line-style": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<line-style>","type":"type","url":"#typedef-line-style"}, "#typedef-line-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<line-width>","type":"type","url":"#typedef-line-width"}, "#typedef-repeat-style": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<repeat-style>","type":"type","url":"#typedef-repeat-style"}, "#typedef-shadow": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"<shadow>","type":"type","url":"#typedef-shadow"}, "#valdef-background-attachment-fixed": {"export":true,"for_":["background-attachment"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"fixed","type":"value","url":"#valdef-background-attachment-fixed"}, "#valdef-background-attachment-local": {"export":true,"for_":["background-attachment"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"local","type":"value","url":"#valdef-background-attachment-local"}, "#valdef-background-attachment-scroll": {"export":true,"for_":["background-attachment"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"scroll","type":"value","url":"#valdef-background-attachment-scroll"}, "#valdef-background-clip-border-box": {"export":true,"for_":["background-clip"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-box","type":"value","url":"#valdef-background-clip-border-box"}, "#valdef-background-clip-content-box": {"export":true,"for_":["background-clip"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"content-box","type":"value","url":"#valdef-background-clip-content-box"}, "#valdef-background-clip-padding-box": {"export":true,"for_":["background-clip"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"padding-box","type":"value","url":"#valdef-background-clip-padding-box"}, "#valdef-background-image-none": {"export":true,"for_":["background-image"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"none","type":"value","url":"#valdef-background-image-none"}, "#valdef-background-origin-border-box": {"export":true,"for_":["background-origin"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"border-box","type":"value","url":"#valdef-background-origin-border-box"}, "#valdef-background-position-bottom": {"export":true,"for_":["background-position"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"bottom","type":"value","url":"#valdef-background-position-bottom"}, "#valdef-background-position-center": {"export":true,"for_":["background-position"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"center","type":"value","url":"#valdef-background-position-center"}, "#valdef-background-position-left": {"export":true,"for_":["background-position"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"left","type":"value","url":"#valdef-background-position-left"}, "#valdef-background-position-right": {"export":true,"for_":["background-position"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"right","type":"value","url":"#valdef-background-position-right"}, "#valdef-background-position-top": {"export":true,"for_":["background-position"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"top","type":"value","url":"#valdef-background-position-top"}, "#valdef-background-repeat-no-repeat": {"export":true,"for_":["background-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"no-repeat","type":"value","url":"#valdef-background-repeat-no-repeat"}, "#valdef-background-repeat-repeat": {"export":true,"for_":["background-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"repeat","type":"value","url":"#valdef-background-repeat-repeat"}, "#valdef-background-repeat-repeat-x": {"export":true,"for_":["background-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"repeat-x","type":"value","url":"#valdef-background-repeat-repeat-x"}, "#valdef-background-repeat-repeat-y": {"export":true,"for_":["background-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"repeat-y","type":"value","url":"#valdef-background-repeat-repeat-y"}, "#valdef-background-repeat-round": {"export":true,"for_":["background-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"round","type":"value","url":"#valdef-background-repeat-round"}, "#valdef-background-repeat-space": {"export":true,"for_":["background-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"space","type":"value","url":"#valdef-background-repeat-space"}, "#valdef-background-size-auto": {"export":true,"for_":["background-size"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"auto","type":"value","url":"#valdef-background-size-auto"}, "#valdef-background-size-contain": {"export":true,"for_":["background-size"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"contain","type":"value","url":"#valdef-background-size-contain"}, "#valdef-border-image-repeat-repeat": {"export":true,"for_":["border-image-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"repeat","type":"value","url":"#valdef-border-image-repeat-repeat"}, "#valdef-border-image-repeat-round": {"export":true,"for_":["border-image-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"round","type":"value","url":"#valdef-border-image-repeat-round"}, "#valdef-border-image-repeat-space": {"export":true,"for_":["border-image-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"space","type":"value","url":"#valdef-border-image-repeat-space"}, "#valdef-border-image-repeat-stretch": {"export":true,"for_":["border-image-repeat"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"stretch","type":"value","url":"#valdef-border-image-repeat-stretch"}, "#valdef-border-image-width-auto": {"export":true,"for_":["border-image-width"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"auto","type":"value","url":"#valdef-border-image-width-auto"}, "#valdef-line-style-dotted": {"export":true,"for_":["<line-style>","border","border-bottom-style","border-left-style","border-right-style","border-style","border-top-style"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"dotted","type":"value","url":"#valdef-line-style-dotted"}, "#valdef-line-style-groove": {"export":true,"for_":["<line-style>","border","border-bottom-style","border-left-style","border-right-style","border-style","border-top-style"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"groove","type":"value","url":"#valdef-line-style-groove"}, "#valdef-line-style-hidden": {"export":true,"for_":["<line-style>","border","border-bottom-style","border-left-style","border-right-style","border-style","border-top-style"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"hidden","type":"value","url":"#valdef-line-style-hidden"}, "#valdef-line-style-inset": {"export":true,"for_":["<line-style>","border","border-bottom-style","border-left-style","border-right-style","border-style","border-top-style"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"inset","type":"value","url":"#valdef-line-style-inset"}, "#valdef-line-style-none": {"export":true,"for_":["<line-style>","border","border-bottom-style","border-left-style","border-right-style","border-style","border-top-style"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"none","type":"value","url":"#valdef-line-style-none"}, "#valdef-line-style-outset": {"export":true,"for_":["<line-style>","border","border-bottom-style","border-left-style","border-right-style","border-style","border-top-style"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"outset","type":"value","url":"#valdef-line-style-outset"}, "#valdef-line-style-ridge": {"export":true,"for_":["<line-style>","border","border-bottom-style","border-left-style","border-right-style","border-style","border-top-style"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"ridge","type":"value","url":"#valdef-line-style-ridge"}, "#valdef-line-style-solid": {"export":true,"for_":["<line-style>","border","border-bottom-style","border-left-style","border-right-style","border-style","border-top-style"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"solid","type":"value","url":"#valdef-line-style-solid"}, "#valdef-line-width-medium": {"export":true,"for_":["<line-width>","border","border-bottom-width","border-left-width","border-right-width","border-top-width","border-width"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"medium","type":"value","url":"#valdef-line-width-medium"}, "#valdef-line-width-thick": {"export":true,"for_":["<line-width>","border","border-bottom-width","border-left-width","border-right-width","border-top-width","border-width"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"thick","type":"value","url":"#valdef-line-width-thick"}, "#valdef-line-width-thin": {"export":true,"for_":["<line-width>","border","border-bottom-width","border-left-width","border-right-width","border-top-width","border-width"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"local","text":"thin","type":"value","url":"#valdef-line-width-thin"}, "https://drafts.csswg.org/css2/#valdef-border-collapse-collapse": {"export":true,"for_":["border-collapse"],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"collapse","type":"value","url":"https://drafts.csswg.org/css2/#valdef-border-collapse-collapse"}, "https://html.spec.whatwg.org/multipage/sections.html#the-body-element": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"body","type":"element","url":"https://html.spec.whatwg.org/multipage/sections.html#the-body-element"}, "https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"border-collapse","type":"property","url":"https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse"}, "https://www.w3.org/TR/CSS21/tables.html#value-def-inline-table": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"inline-table","type":"value","url":"https://www.w3.org/TR/CSS21/tables.html#value-def-inline-table"}, "https://www.w3.org/TR/CSS21/tables.html#value-def-table-cell": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"table-cell","type":"value","url":"https://www.w3.org/TR/CSS21/tables.html#value-def-table-cell"}, "https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"overflow","type":"property","url":"https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow"}, "https://www.w3.org/TR/CSS21/visuren.html#propdef-display": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"display","type":"property","url":"https://www.w3.org/TR/CSS21/visuren.html#propdef-display"}, "https://www.w3.org/TR/CSS21/visuren.html#x1": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"viewport","type":"dfn","url":"https://www.w3.org/TR/CSS21/visuren.html#x1"}, "https://www.w3.org/TR/css-2023/#user-agent": {"export":false,"for_":[],"level":"2023","normative":true,"shortname":"css","spec":"css-2023","status":"snapshot","text":"ua","type":"dfn","url":"https://www.w3.org/TR/css-2023/#user-agent"}, "https://www.w3.org/TR/css-box-4/#border": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"border","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#border"}, "https://www.w3.org/TR/css-box-4/#border-area": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"border area","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#border-area"}, "https://www.w3.org/TR/css-box-4/#border-box": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"border box","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#border-box"}, "https://www.w3.org/TR/css-box-4/#border-edge": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"border edge","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#border-edge"}, "https://www.w3.org/TR/css-box-4/#content-area": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"content area","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#content-area"}, "https://www.w3.org/TR/css-box-4/#content-box": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"content box","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#content-box"}, "https://www.w3.org/TR/css-box-4/#content-edge": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"content edge","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#content-edge"}, "https://www.w3.org/TR/css-box-4/#margin": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#margin"}, "https://www.w3.org/TR/css-box-4/#margin-area": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin area","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#margin-area"}, "https://www.w3.org/TR/css-box-4/#margin-edge": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin edge","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#margin-edge"}, "https://www.w3.org/TR/css-box-4/#padding": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#padding"}, "https://www.w3.org/TR/css-box-4/#padding-area": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding area","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#padding-area"}, "https://www.w3.org/TR/css-box-4/#padding-box": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding box","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#padding-box"}, "https://www.w3.org/TR/css-box-4/#padding-edge": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding edge","type":"dfn","url":"https://www.w3.org/TR/css-box-4/#padding-edge"}, "https://www.w3.org/TR/css-box-4/#propdef-margin": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-margin"}, "https://www.w3.org/TR/css-box-4/#propdef-padding": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-padding"}, "https://www.w3.org/TR/css-box-4/#typedef-visual-box": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"<visual-box>","type":"type","url":"https://www.w3.org/TR/css-box-4/#typedef-visual-box"}, "https://www.w3.org/TR/css-break-4/#box-fragment": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"snapshot","text":"box fragment","type":"dfn","url":"https://www.w3.org/TR/css-break-4/#box-fragment"}, "https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"snapshot","text":"box-decoration-break","type":"property","url":"https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break"}, "https://www.w3.org/TR/css-cascade-5/#computed-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"computed value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#computed-value"}, "https://www.w3.org/TR/css-cascade-5/#initial-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"initial value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#initial-value"}, "https://www.w3.org/TR/css-cascade-5/#shorthand-property": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"shorthand property","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#shorthand-property"}, "https://www.w3.org/TR/css-cascade-5/#specified-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"specified value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#specified-value"}, "https://www.w3.org/TR/css-cascade-5/#used-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"used value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#used-value"}, "https://www.w3.org/TR/css-color-4/#propdef-color": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"color","type":"property","url":"https://www.w3.org/TR/css-color-4/#propdef-color"}, "https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor": {"export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"currentcolor","type":"value","url":"https://www.w3.org/TR/css-color-4/#valdef-color-currentcolor"}, "https://www.w3.org/TR/css-color-4/#valdef-color-transparent": {"export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"transparent","type":"value","url":"https://www.w3.org/TR/css-color-4/#valdef-color-transparent"}, "https://www.w3.org/TR/css-color-5/#typedef-color": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"snapshot","text":"<color>","type":"type","url":"https://www.w3.org/TR/css-color-5/#typedef-color"}, "https://www.w3.org/TR/css-contain-2/#containment": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"css-contain","spec":"css-contain-2","status":"snapshot","text":"containment","type":"dfn","url":"https://www.w3.org/TR/css-contain-2/#containment"}, "https://www.w3.org/TR/css-content-3/#propdef-content": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-content","spec":"css-content-3","status":"snapshot","text":"content","type":"property","url":"https://www.w3.org/TR/css-content-3/#propdef-content"}, "https://www.w3.org/TR/css-display-3/#initial-containing-block": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"initial containing block","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#initial-containing-block"}, "https://www.w3.org/TR/css-display-3/#principal-box": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"principal box","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#principal-box"}, "https://www.w3.org/TR/css-display-3/#replaced-element": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"replaced element","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#replaced-element"}, "https://www.w3.org/TR/css-display-3/#root-element": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"root element","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#root-element"}, "https://www.w3.org/TR/css-images-3/#default-object-size": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"default object size","type":"dfn","url":"https://www.w3.org/TR/css-images-3/#default-object-size"}, "https://www.w3.org/TR/css-images-3/#natural-aspect-ratio": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"natural aspect ratio","type":"dfn","url":"https://www.w3.org/TR/css-images-3/#natural-aspect-ratio"}, "https://www.w3.org/TR/css-images-3/#natural-dimensions": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"natural dimension","type":"dfn","url":"https://www.w3.org/TR/css-images-3/#natural-dimensions"}, "https://www.w3.org/TR/css-images-3/#natural-height": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"natural height","type":"dfn","url":"https://www.w3.org/TR/css-images-3/#natural-height"}, "https://www.w3.org/TR/css-images-3/#natural-size": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"natural size","type":"dfn","url":"https://www.w3.org/TR/css-images-3/#natural-size"}, "https://www.w3.org/TR/css-images-3/#natural-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"natural width","type":"dfn","url":"https://www.w3.org/TR/css-images-3/#natural-width"}, "https://www.w3.org/TR/css-images-3/#specified-size": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"specified size","type":"dfn","url":"https://www.w3.org/TR/css-images-3/#specified-size"}, "https://www.w3.org/TR/css-images-3/#typedef-image": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"<image>","type":"type","url":"https://www.w3.org/TR/css-images-3/#typedef-image"}, "https://www.w3.org/TR/css-overflow-3/#scroll-container": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"snapshot","text":"scroll container","type":"dfn","url":"https://www.w3.org/TR/css-overflow-3/#scroll-container"}, "https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"snapshot","text":"scrollable overflow area","type":"dfn","url":"https://www.w3.org/TR/css-overflow-3/#scrollable-overflow-region"}, "https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"snapshot","text":"ruby annotation container","type":"dfn","url":"https://www.w3.org/TR/css-ruby-1/#ruby-annotation-container-box"}, "https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-ruby","spec":"css-ruby-1","status":"snapshot","text":"ruby base container","type":"dfn","url":"https://www.w3.org/TR/css-ruby-1/#ruby-base-container-box"}, "https://www.w3.org/TR/css-sizing-3/#propdef-height": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"height","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-height"}, "https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"snapshot","text":"text-shadow","type":"property","url":"https://www.w3.org/TR/css-text-decor-4/#propdef-text-shadow"}, "https://www.w3.org/TR/css-values-3/#typedef-position": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-values","spec":"css-values-3","status":"snapshot","text":"<position>","type":"type","url":"https://www.w3.org/TR/css-values-3/#typedef-position"}, "https://www.w3.org/TR/css-values-4/#comb-all": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"&&","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-all"}, "https://www.w3.org/TR/css-values-4/#comb-any": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"||","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-any"}, "https://www.w3.org/TR/css-values-4/#comb-comma": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":",","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-comma"}, "https://www.w3.org/TR/css-values-4/#comb-one": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"|","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "https://www.w3.org/TR/css-values-4/#css-bracketed-range-notation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"css bracketed range notation","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-bracketed-range-notation"}, "https://www.w3.org/TR/css-values-4/#css-value-definition-syntax": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"value definition syntax","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-value-definition-syntax"}, "https://www.w3.org/TR/css-values-4/#css-wide-keywords": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"css-wide keywords","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-wide-keywords"}, "https://www.w3.org/TR/css-values-4/#length-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<length>","type":"type","url":"https://www.w3.org/TR/css-values-4/#length-value"}, "https://www.w3.org/TR/css-values-4/#mult-comma": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"#","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-comma"}, "https://www.w3.org/TR/css-values-4/#mult-num": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"{a}","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-num"}, "https://www.w3.org/TR/css-values-4/#mult-num-range": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"{a,b}","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-num-range"}, "https://www.w3.org/TR/css-values-4/#mult-opt": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"?","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-opt"}, "https://www.w3.org/TR/css-values-4/#number-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<number>","type":"type","url":"https://www.w3.org/TR/css-values-4/#number-value"}, "https://www.w3.org/TR/css-values-4/#percentage-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<percentage>","type":"type","url":"https://www.w3.org/TR/css-values-4/#percentage-value"}, "https://www.w3.org/TR/css-values-4/#snap-a-length-as-a-border-width": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"snap as a border width","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#snap-a-length-as-a-border-width"}, "https://www.w3.org/TR/css-values-4/#typedef-length-percentage": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<length-percentage>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-length-percentage"}, "https://www.w3.org/TR/filter-effects-1/#funcdef-filter-drop-shadow": {"export":true,"for_":["filter"],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"drop-shadow()","type":"function","url":"https://www.w3.org/TR/filter-effects-1/#funcdef-filter-drop-shadow"}, "https://www.w3.org/TR/mediaqueries-5/#paged-media": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"paged media","type":"dfn","url":"https://www.w3.org/TR/mediaqueries-5/#paged-media"}, "https://www.w3.org/TR/selectors-3/#first-letter0": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"selectors","spec":"selectors-3","status":"snapshot","text":"::first-letter","type":"selector","url":"https://www.w3.org/TR/selectors-3/#first-letter0"}, "https://www.w3.org/TR/selectors-3/#sel-first-line": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"selectors","spec":"selectors-3","status":"snapshot","text":"::first-line","type":"selector","url":"https://www.w3.org/TR/selectors-3/#sel-first-line"}, "https://www.w3.org/TR/selectors-4/#pseudo-element": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"snapshot","text":"pseudo-element","type":"dfn","url":"https://www.w3.org/TR/selectors-4/#pseudo-element"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.text != linkText) { dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.text) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script>