From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/border-width/index.html | 193 +++++++++++++++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100644 files/ru/web/css/border-width/index.html (limited to 'files/ru/web/css/border-width') diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html new file mode 100644 index 0000000000..658ac21870 --- /dev/null +++ b/files/ru/web/css/border-width/index.html @@ -0,0 +1,193 @@ +--- +title: border-width +slug: Web/CSS/border-width +translation_of: Web/CSS/border-width +--- +
{{CSSRef}}
+ +

Summary

+ +

CSS свойство {{cssxref("border-width")}} определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.

+ +

{{cssinfo}}

+ +

Синтакс

+ +
Общий синтаксис: {{csssyntax("border-width")}}
+
+ +
border-width: ширина                  /* Одно значение */
+border-width: вертикальная горизотальная    /* Два значения */
+border-width: верх горизонтальная основание    /* Три значения */
+border-width: верх право основание лево  /* Четыре значения */
+
+border-width: inherit /* Родительское значение */
+
+ +

Values

+ +
+
<br-width>
+
Is either a non-negative explicit {{cssxref("<length>")}} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values: + + + + + + + + + + + + + + + + + + +
thin +
+ 		A thin border
medium +
+ 		A medium border
thick +
+ 		A thick border
+ The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.
+
+ +

inherit

+ +
+
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+ +

Examples

+ +

A mix of values and lengths

+ +

HTML

+ +
<p id="sval">
+    one value: 6px wide border on all 4 sides</p>
+<p id="bival">
+    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
+<p id="treval">
+    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
+<p id="fourval">
+    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
+ +

CSS

+ +
#sval {
+    border: ridge #ccc;
+    border-width: 6px;
+}
+#bival {
+    border: solid red;
+    border-width: 2px 10px;
+}
+#treval {
+    border: dotted orange;
+    border-width: 0.3em 0 9px;
+}
+#fourval {
+    border: solid lightgreen;
+    border-width: thin medium thick 1em;
+}
+p {
+    width: auto;
+    margin: 0.25em;
+    padding: 0.25em;
+}
+ +

Result

+ +

{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}No direct change, the {{cssxref("<length>")}} CSS data type extension has an effect on this property.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}Added the constraint that values' meaning must be constant inside a document.
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.0{{CompatGeckoMobile("1.9.2")}}6.0113.0
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf