Skip to content

Commit d77a891

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #502 from Yashgabani845/yash-work4
4 section added in css
2 parents 3c7c200 + 4db6dc1 commit d77a891

File tree

4 files changed

+843
-0
lines changed

4 files changed

+843
-0
lines changed

‎docs/CSS/css-borders.md

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
# CSS Borders
2+
3+
```css
4+
div.all-borders {
5+
border: 1px solid black;
6+
}
7+
```
8+
9+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
10+
<div class="all-borders" style={{border: "1px solid black", padding: "10px"}}>
11+
I have borders on all sides.
12+
</div>
13+
</BrowserWindow>
14+
```css
15+
div.bottom-border {
16+
border-bottom: 1px solid red;
17+
}
18+
```
19+
20+
#### Output
21+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
22+
<div class="bottom-border" style={{borderBottom: "1px solid red", padding: "10px"}}>
23+
I have a red bottom border.
24+
</div>
25+
</BrowserWindow>
26+
```css
27+
div.rounded-borders {
28+
border: 1px solid black;
29+
border-radius: 10px;
30+
}
31+
```
32+
33+
#### Output
34+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
35+
<div class="rounded-borders" style={{border: "1px solid black", borderRadius: "10px", padding: "10px"}}>
36+
I have rounded borders.
37+
</div>
38+
</BrowserWindow>
39+
```css
40+
div.left-border {
41+
border-left: 1px solid blue;
42+
}
43+
```
44+
45+
#### Output
46+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
47+
<div class="left-border" style={{borderLeft: "1px solid blue", padding: "10px"}}>
48+
I have a blue left border.
49+
</div>
50+
</BrowserWindow>
51+
### CSS Border Style
52+
53+
```css
54+
p.dotted { border-style: dotted; }
55+
p.dashed { border-style: dashed; }
56+
p.solid { border-style: solid; }
57+
p.double { border-style: double; }
58+
p.groove { border-style: groove; }
59+
p.ridge { border-style: ridge; }
60+
p.inset { border-style: inset; }
61+
p.outset { border-style: outset; }
62+
p.none { border-style: none; }
63+
p.hidden { border-style: hidden; }
64+
p.mix { border-style: dotted dashed solid double; }
65+
```
66+
67+
#### Output
68+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
69+
<p class="dotted" style={{borderStyle: "dotted"}}>A dotted border.</p>
70+
<p class="dashed" style={{borderStyle: "dashed"}}>A dashed border.</p>
71+
<p class="solid" style={{borderStyle: "solid"}}>A solid border.</p>
72+
<p class="double" style={{borderStyle: "double"}}>A double border.</p>
73+
<p class="groove" style={{borderStyle: "groove"}}>A groove border. The effect depends on the border-color value.</p>
74+
<p class="ridge" style={{borderStyle: "ridge"}}>A ridge border. The effect depends on the border-color value.</p>
75+
<p class="inset" style={{borderStyle: "inset"}}>An inset border. The effect depends on the border-color value.</p>
76+
<p class="outset" style={{borderStyle: "outset"}}>An outset border. The effect depends on the border-color value.</p>
77+
<p class="none" style={{borderStyle: "none"}}>No border.</p>
78+
<p class="hidden" style={{borderStyle: "hidden"}}>A hidden border.</p>
79+
<p class="mix" style={{borderStyle: "dotted dashed solid double"}}>A mixed border.</p>
80+
</BrowserWindow>
81+
### CSS Border Width
82+
83+
```css
84+
p.one {
85+
border-style: solid;
86+
border-width: 5px;
87+
}
88+
89+
p.two {
90+
border-style: solid;
91+
border-width: medium;
92+
}
93+
94+
p.three {
95+
border-style: dotted;
96+
border-width: 2px;
97+
}
98+
99+
p.four {
100+
border-style: dotted;
101+
border-width: thick;
102+
}
103+
```
104+
105+
#### Output
106+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
107+
<p class="one" style={{borderStyle: "solid", borderWidth: "5px"}}>5px border-width</p>
108+
<p class="two" style={{borderStyle: "solid", borderWidth: "medium"}}>Medium border-width</p>
109+
<p class="three" style={{borderStyle: "dotted", borderWidth: "2px"}}>2px border-width</p>
110+
<p class="four" style={{borderStyle: "dotted", borderWidth: "thick"}}>Thick border-width</p>
111+
</BrowserWindow>
112+
### CSS Border Color
113+
114+
```css
115+
p.one {
116+
border-style: solid;
117+
border-color: red;
118+
}
119+
120+
p.two {
121+
border-style: solid;
122+
border-color: green;
123+
}
124+
125+
p.three {
126+
border-style: dotted;
127+
border-color: blue;
128+
}
129+
```
130+
131+
#### Output
132+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
133+
<p class="one" style={{borderStyle: "solid", borderColor: "red"}}>Red border</p>
134+
<p class="two" style={{borderStyle: "solid", borderColor: "green"}}>Green border</p>
135+
<p class="three" style={{borderStyle: "dotted", borderColor: "blue"}}>Blue border</p>
136+
</BrowserWindow>
137+
### CSS Border - Individual Sides
138+
139+
```css
140+
p {
141+
border-top-style: dotted;
142+
border-right-style: solid;
143+
border-bottom-style: dotted;
144+
border-left-style: solid;
145+
}
146+
```
147+
148+
#### Output
149+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
150+
<p style={{borderTopStyle: "dotted", borderRightStyle: "solid", borderBottomStyle: "dotted", borderLeftStyle: "solid"}}>
151+
Different Border Styles
152+
</p>
153+
</BrowserWindow>
154+
```css
155+
p {
156+
border-style: dotted solid;
157+
}
158+
```
159+
160+
#### Output
161+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
162+
<p style={{borderStyle: "dotted solid"}}>
163+
Different Border Styles
164+
</p>
165+
</BrowserWindow>
166+
### CSS Border - Shorthand Property
167+
168+
```css
169+
p {
170+
border: 5px solid red;
171+
}
172+
```
173+
174+
#### Output
175+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
176+
<p style={{border: "5px solid red"}}>
177+
Some text
178+
</p>
179+
</BrowserWindow>
180+
```css
181+
p {
182+
border-left: 6px solid red;
183+
}
184+
```
185+
186+
#### Output
187+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
188+
<p style={{borderLeft: "6px solid red"}}>
189+
Some text
190+
</p>
191+
192+
```css
193+
p {
194+
border-bottom: 6px solid red;
195+
}
196+
```
197+
</BrowserWindow>
198+
#### Output
199+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
200+
<p style={{borderBottom: "6px solid red"}}>
201+
Some text
202+
</p>
203+
</BrowserWindow>
204+
### CSS Rounded Borders
205+
206+
```css
207+
p {
208+
border: 2px solidred;
209+
border-radius: 5px;
210+
}
211+
```
212+
213+
#### Output
214+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
215+
<p style={{border: "2px solid red", borderRadius: "5px"}}>
216+
Normal border
217+
</p>
218+
</BrowserWindow>
219+
```css
220+
p {
221+
border: 2px solid red;
222+
border-radius: 15px;
223+
}
224+
```
225+
226+
#### Output
227+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
228+
<p style={{border: "2px solid red", borderRadius: "15px"}}>
229+
Round border
230+
</p>
231+
</BrowserWindow>
232+
```css
233+
p {
234+
border: 2px solid red;
235+
border-radius: 25px;
236+
}
237+
```
238+
239+
#### Output
240+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
241+
<p style={{border: "2px solid red", borderRadius: "25px"}}>
242+
Rounder border
243+
</p>
244+
</BrowserWindow>
245+
```css
246+
p {
247+
border: 2px solid red;
248+
border-radius: 50px;
249+
}
250+
```
251+
252+
#### Output
253+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
254+
<p style={{border: "2px solid red", borderRadius: "50px"}}>
255+
Roundest border
256+
</p>
257+
</BrowserWindow>

0 commit comments

Comments
 (0)