initial commit

1 files changed, 332 insertions, 0 deletions

diff --git a/files/pt-br/web/css/border-radius/index.html b/files/pt-br/web/css/border-radius/index.html
new file mode 100644
index 0000000000..1c71af8e01
--- /dev/null
+++ b/files/pt-br/web/css/border-radius/index.html
@@ -0,0 +1,332 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - border-radius
+translation_of: Web/CSS/border-radius
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>A propriedade CSS <strong>border-radius</strong> permite definir como bordas arredondadas são. A curva de cada esquina é definida usando um ou dois raios, definindo sua forma: círculo ou elipse.</p>
+
+<p><img alt="Imagens das esquinas arredondadas com CSS3: Sem esquina arredondada, arredondado usando um arco de círculo, arredondado usando um arco de elípse" class="default internal" src="/files/13813/border-radius-sh.png" style="height: 176px; width: 549px;"></p>
+
+<p>O raio é aplicável a todo o {{Cssxref("background")}}, mesmo se o elemento não tiver borda; a posição exata do recorte é definido pela propriedade {{Cssxref("background-clip")}}.</p>
+
+<p>Esta propriedade é um <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> para definir as quatro propriedades {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}} e {{Cssxref("border-bottom-left-radius")}}.</p>
+
+<div class="note">Como com qualquer propriedade shorthand, valores individuais herdados não são possíveis, isto é, border-radius: 0 0 inherit inherit, que substituiria definições parciais existentes. Neste caso, a propriedade individual longhand deve ser usada.</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: css"><strong>/* A sintaxe do primeiro raio permite de um a quatro valores */</strong>
+/* O raio é definido para todos os 4 lados */
+border-radius: 10px;
+
+/* <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */
+border-radius: 10px 5%;
+
+/* <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */
+border-radius: 2px 4px 2px;
+
+/* <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */
+border-radius: 1px 0 3px 4px;
+
+<strong>/* A sintaxe do segundo raio permite de um a quatro valores</strong> */
+/* (first radius values) / <em>radius</em> */
+border-radius: 10px 5% / 20px;
+
+/* (first radius values) / <em>top-left-and-bottom-right</em> | <em>top-right-and-bottom-left</em> */
+border-radius: 10px 5% / 20px 30px;
+
+/* (first radius values) / <em>top-left</em> | <em>top-right-and-bottom-left</em> | <em>bottom-right</em> */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (first radius values) / <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+border-radius: inherit;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;"><em>radius</em></td>
+   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td>
+   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td>
+   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left</em></td>
+   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right</em></td>
+   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-right</em></td>
+   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-left</em></td>
+   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
+   <td style="vertical-align: top;">Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><code>inherit</code></td>
+   <td> </td>
+   <td style="vertical-align: top;">Is a keyword indicating that all four values are inherited from their parent's element calculated value.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("&lt;length&gt;")}} data types. Negative values are invalid.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre class="brush: css">border-radius: 1em/5em;
+
+/* is equivalent to */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px;
+
+/* is equivalent to: */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+</pre>
+
+<h3 id="Sintaxe_formal">Sintaxe formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;">  border: solid 10px;
+  /* the border will curve into a 'D' */
+  border-radius: 10px 40px 40px 10px;
+
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;">  border: groove 1em red;
+  border-radius: 2em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;">  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;">  border: none;
+  border-radius: 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: black; color: white; border: none; border-radius: 50%;">  border: none;
+  border-radius: 50%;
+</pre>
+
+<h2 id="Live_Samples">Live Samples</h2>
+
+<p>Sample 1 : <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></p>
+
+<p>Sample 2 : <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></p>
+
+<p>Sample 3 : <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></p>
+
+<p>Sample 4 : <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></p>
+
+<p>Sample 5 : <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></p>
+
+<h2 id="Notas">Notas</h2>
+
+<ul>
+ <li>Prior to Firefox 50, dotted and dashed rounded border corners were rendered as solid; see {{bug("382721")}}.</li>
+ <li><code>border-radius</code> does not apply to table elements when {{Cssxref("border-collapse")}} is <code>collapse</code>.</li>
+ <li>Old versions of WebKit handle multiple values differently, see below.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+     {{CompatGeckoDesktop("2.0")}}<sup>[10]</sup></p>
+   </td>
+   <td>1.0{{property_prefix("-webkit")}}<br>
+    4.0<sup>[9]</sup></td>
+   <td>9.0</td>
+   <td>10.5<sup>[8]</sup></td>
+   <td>3.0{{property_prefix("-webkit")}}<br>
+    5.0<sup>[9]</sup></td>
+  </tr>
+  <tr>
+   <td>Elliptical borders</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[7]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[7]</sup></td>
+  </tr>
+  <tr>
+   <td>4 values for 4 corners</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0<sup>[6]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.0<sup>[6]</sup></td>
+  </tr>
+  <tr>
+   <td>Percentages</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup><br>
+    {{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11.5<sup>[3]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>iOS Safari</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Android Browser</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[10]</sup></td>
+   <td>3.2{{property_prefix("-webkit")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>2.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Elliptical borders</td>
+   <td>{{CompatVersionUnknown}}<sup>[10]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>4 values for 4 corners</td>
+   <td>{{CompatVersionUnknown}}<sup>[10]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Percentages</td>
+   <td>{{CompatVersionUnknown}}<sup>[10]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Gecko 2.0 {{geckoRelease("2.0")}} <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0 {{geckoRelease("12.0")}}. In order to conform to the CSS3 standard, Gecko 2.0 changes the handling of {{cssxref("&lt;percentage&gt;")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code>. Gecko 2.0 also makes rounded corners clip content and images (if {{cssxref("overflow")}}<code>: visible</code> is not set)</p>
+
+<p>Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{geckoRelease("13.0")}}.</p>
+
+<p>[2] <code>&lt;percentage&gt;</code> values are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>).</p>
+
+<p>[3] The implementation of <code>&lt;percentage&gt;</code> values was buggy in Opera prior to 11.50.</p>
+
+<p>[4] <code>&lt;percentage&gt;</code> values are not supported in iOS versions prior to 5 and Android versions prior to WebKit 532.</p>
+
+<p>[5] <code>&lt;percentage&gt;</code> values are implemented in a non-standard way prior to Gecko 2.0. Both horizontal and vertical radii were relative to the width of the border box.</p>
+
+<p>[6] Safari and Chrome versions prior to WebKit 532.5 support only one value for all four corners. For different radii the {{cssxref("border-top-left-radius", "border-top-left-radius", "#Examples")}} long form properties must be used.</p>
+
+<p>[7] Safari and Chrome versions prior to WebKit 532.5 don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all four corners. <code>-webkit-border-radius: 40px 10px;</code> is equivalent to <code>border-radius: 40px/10px;</code>.</p>
+
+<p>[8] In Opera prior to version 11.60, applying <code>border-radius</code> to replaced elements will not have rounded corners.</p>
+
+<p>[9] Current Chrome and Safari versions ignore {{cssxref("border-radius")}} on {{HTMLElement("select")}} elements unless {{cssxref("-webkit-appearance")}} is overridden to an appropriate value.</p>
+
+<p>[10] Prior to Gecko 50.0 {{geckoRelease("50.0")}}, border styles of rounded corners (with {{cssxref("border-radius")}}) were always rendered as if <code>border-style</code> was <code>solid</code>. This has been fixed in Gecko 50.0.</p>
+
+<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Border-radius-related CSS properties: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li>
+</ul>