css-reference/property/border-bottom-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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
---
layout: single
property_name: border-bottom-width
---

<section id="border-bottom-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-bottom-width/"
        data-property-name="border-bottom-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-bottom-width"
        >Share</a
      >
      <a
        target="_blank"
        href="https://developer.mozilla.org/en/docs/Web/CSS/border-bottom-width"
        data-tooltip="See on Mozilla Developer Network"
        rel="external"
        >MDN</a
      >
    </nav>
    <h2 class="property-name">
      <a href="#border-bottom-width"><span>#</span>border-bottom-width</a>
    </h2>
    <div class="property-description">
      <p>
        Like
        <code class="shorthand"
          ><a href="http://bgooonz-blog.github.io/#border-width"
            >border-width</a
          ></code
        >, but for the <strong>bottom</strong> border only.
      </p>
    </div>
  </header>

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

  <section class="example">
    <header class="example-header">
      <p class="example-name">
        <code
          class="example-default"
          data-tooltip="This is the property's default value"
          >default</code
        >

        <code
          class="example-value"
          data-tooltip="Click to copy"
          data-clipboard-text="border-bottom-width: 0;"
          >border-bottom-width: 0;</code
        >
      </p>
      <div class="example-description">
        <p>Removes the bottom border.</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-bottom-width"
          id="border-bottom-width-0"
        >
          Hello world
        </div>
      </div>
    </aside>
    <style type="text/css">
      #border-bottom-width-0 {
        border-bottom-width: 0;
      }
    </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-bottom-width: 4px;"
          >border-bottom-width: 4px;</code
        >
      </p>
      <div class="example-description">
        <p>You can use <strong>pixel</strong> values.</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-bottom-width"
          id="border-bottom-width-4px"
        >
          Hello world
        </div>
      </div>
    </aside>
    <style type="text/css">
      #border-bottom-width-4px {
        border-bottom-width: 4px;
      }
    </style>
  </section>
</section>