mozilla

Compare Revisions

border-radius

Change Revisions

Revision 36289:

Revision 36289 by teoli on

Revision 36290:

Revision 36290 by teoli on

Title:
border-radius
border-radius
Slug:
CSS/border-radius
CSS/border-radius
Tags:
css, "CSS Reference", CSS3, css3-background, NeedsMobileBrowserCompatibility
css, "CSS Reference", CSS3, css3-background, NeedsMobileBrowserCompatibility
Content:

Revision 36289
Revision 36290
n126    <p>n
127      Accepts one, two, three or four <code>&lt;border-radius&gt;
></code> values, optional followed by a slash <code>/</code> and a 
> second set of values. <code>&lt;border-radius&gt;</code> represe 
>nts one of: 
128    </p>
n131        <code>&lt;length&gt;</code>n128        &lt;length&gt;
n134        See {{ Xref_csslength() }} for possible units.n131        Denotes the size of the circle radius or the semi-major a
 >nd semi-minor axes of the ellipsis. It can be expressed in any un
 >it allowed by the CSS {{ xref_csslength() }} data types. Negative
 > values are invalid.
n137        <code>&lt;percentage&gt;</code>n134        &lt;percentage&gt;
n140        Percentages for the horizontal radius are relative to then137        Denotes the size of the circle radius, or the semi-major 
> width of the border box, whereas percentages for the vertical ra>and semi-minor axes of the ellipsis, using percentage values. Per
>dius are relative to the height of the border box.>centages for the horizontal axe refer to the width of the box, pe
 >rcentages for the vertical axe refer to the height of the box. Ne
 >gative values are invalid.
t143    <p>t
144      If <strong>one</strong> value is set, this radius applies t
>o <strong>all 4 corners</strong>. 
145    </p>
146    <p>
147      If <strong>two</strong> values are set, the <strong>first</
>strong> applies to <code>top-left</code> and <code>bottom-right</ 
>code> corner, the <strong>second</strong> applies to <code>top-ri 
>ght</code> and <code>bottom-left</code> corner. 
148    </p>
149    <p>
150      <strong>Four</strong> values apply to the <code>top-left</c
>ode>, <code>top-right</code>, <code>bottom-right</code>, <code>bo 
>ttom-left</code> corner in that order. 
151    </p>
152    <p>
153      For <span style="font-weight: bold;">t</span><strong>hree</
>strong> values, the second value applies to <code>top-right</code 
>> and also <code>bottom-left</code>. 
154    </p>
155    <p>
156      If the slash followed by a second set of radii is specified
>, the values before the slash are used to specify the horizontal  
>radius, while the values after the slash specify the vertical rad 
>ius.&nbsp; If the slash is omitted, then the same values are used 
> to set both horizontal and vertical radii. 
157    </p>

Back to History