css-reference/property/border-width/index.html at master · BGOOONZ-BLOG/css-reference · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
---
layout: single
property_name: border-width
---

<section id="border-width" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-collection" href="{{site.url}}/box-model/">
        In collection: <strong>box-model</strong>
      </a>
      <a
        class="property-links-direct"
        href="{{site.url}}/property/border-width/"
        data-property-name="border-width"
        data-tooltip="Single page for this property"
        >Permalink</a
      >
      <a
        class="property-share"
        data-tooltip="Share on Twitter or Facebook"
        data-property-name="border-width"
        >Share</a
      >
      <a
        target="_blank"
        href="https://developer.mozilla.org/en/docs/Web/CSS/border-width"
        data-tooltip="See on Mozilla Developer Network"
        rel="external"
        >MDN</a
      >
    </nav>
    <h2 class="property-name">
      <a href="#border-width"><span>#</span>border-width</a>
    </h2>
    <div class="property-description">
      <p>Defines the width of the element&#39;s borders.</p>
    </div>
  </header>

  <style type="text/css">
    .border-width {
      border-style: solid;
    }
  </style>

  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="border-width: 1px;"
          >border-width: 1px;</code
        >
      </p>
      <div class="example-description">
        <p>Defines the width of <strong>all</strong> borders to 1px.</p>
      </div>
    </header>

    <aside class="example-preview">
      <div class="example-browser"><i></i><i></i><i></i></div>
      <div class="example-output">
        <div class="example-output-div border-width" id="border-width-1px">
          Hello world
        </div>
      </div>
    </aside>
    <style type="text/css">
      #border-width-1px {
        border-width: 1px;
      }
    </style>
  </section>
  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="border-width: 2px 0;"
          >border-width: 2px 0;</code
        >
      </p>
      <div class="example-description">
        <p>
          Defines the top and bottom borders to 2px, the left and right to 0.
        </p>
      </div>
    </header>

    <aside class="example-preview">
      <div class="example-browser"><i></i><i></i><i></i></div>
      <div class="example-output">
        <div class="example-output-div border-width" id="border-width-2px-0">
          Hello world
        </div>
      </div>
    </aside>
    <style type="text/css">
      #border-width-2px-0 {
        border-width: 2px 0;
      }
    </style>
  </section>
</section>