blob: d84befbe11df322166ad800ad1b52d0ee6c95c0a (
plain)
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
<!DOCTYPE html>
<html>
<head>
<title>CSS borders lookin' good</title>
<style>
div + div {
margin-top: 20px;
}
#foo {
border-top-color: red;
border-right-color: lime;
border-bottom-color: blue;
border-left-color: yellow;
border-top-width: 40px;
border-right-width: 30px;
border-bottom-width: 20px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#bar {
border: 30px solid orange;
}
#bene {
border: solid;
}
#salvete {
border: 30px;
border-color: grey;
border-style: solid;
}
#amici {
border: aquamarine;
border-width: 30px;
border-style: solid;
}
#resetting {
border: 100px;
border: orange;
border: solid;
}
#three-px-solid-blue-separate {
border-width: 3px;
border-style: solid;
border-color: blue;
}
#three-px-solid-blue {
border: 3px solid blue;
}
#foo-but-actually-reset {
border-top-color: red;
border-right-color: lime;
border-bottom-color: blue;
border-left-color: yellow;
border-top-width: 40px;
border-right-width: 30px;
border-bottom-width: 20px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border: solid;
}
#double-width {
border: 50px 100px solid red;
}
#double-style {
border: 50px solid dotted red;
}
#double-color {
border: 50px solid red blue;
}
#double-width-solo {
border: 50px 100px;
}
#double-style-solo {
border: solid dotted;
}
#double-color-solo {
border: red blue;
}
#dotted-1px {
border: 1px dotted blue;
}
#dotted-5px {
border: 5px dotted blue;
}
#dotted-20px {
border: 20px dotted blue;
}
#dashed-1px {
border: 1px dashed blue;
}
#dashed-5px {
border: 5px dashed blue;
}
#dashed-20px {
border: 20px dashed blue;
}
#mixed {
border-top-width: 20px;
border-top-style: dashed;
border-top-color: red;
border-left-width: 5px;
border-left-style: solid;
border-left-color: blue;
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: lime;
border-right-width: 10px;
border-right-style: inset;
}
</style>
</head>
<body>
<div id="foo">One day at a time!</div>
<div id="bar">Another day at another time!</div>
<div id="bene">bene</div>
<div id="salvete">salvete</div>
<div id="amici">amici</div>
<div id="resetting">resetting</div>
<div id="three-px-solid-blue-separate">three px solid blue separate</div>
<div id="three-px-solid-blue">three px solid blue</div>
<div id="foo-but-actually-reset">foo but actually reset</div>
<div id="double-width">double width</div>
<div id="double-style">double style</div>
<div id="double-color">double color</div>
<div id="double-width-solo">double width solo</div>
<div id="double-style-solo">double style solo</div>
<div id="double-color-solo">double color solo</div>
<div id="dotted-1px">dotted (1px)</div>
<div id="dotted-5px">dotted (5px)</div>
<div id="dotted-20px">dotted (20px)</div>
<div id="dashed-1px">dashed (1px)</div>
<div id="dashed-5px">dashed (5px)</div>
<div id="dashed-20px">dashed (20px)</div>
<div id="mixed">mixed</div>
</body>
</html>
|
