BORDERS

"ADDING BORDER"

1. Open NOTEPAD

 2. Type these following codes.

CSS

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}

HTML

<p class="dotted"> Atticus' Quotes

 </p>

<p class="dashed">

I hope to arrive to my death, late, in love, and a little drunk</p>

<p class="solid">

We are made of all those who have built and broken us.</p>

<p class="double"> She conquered her demons and wore her scars like wings</p>

<p class="groove"> It was her chaos that made her beautiful. </p>

<p class="ridge"> 

Chase your stars fool, life is short.</p>

<p class="inset">  She wasn't looking for a knight, she was looking for a sword.</p>

<p class="outset">She was everything real in a world of make-believe. </p>

<p class="none"> It's a sad thing, protecting a breakable heart.</p>

3. Save the file with a .html extension. 

 4. Test the file in a browser.

EXAMPLE OUTPUT:

"ADDING BORDER WITH COLOR"

1. Open NOTEPAD

 2. Type these following codes.

CSS

p.red { border-style: solid; border-color: red; }

p.green { border-style: solid; border-color: green; }

 p.blue { border-style: solid; border-color:blue; }

HTML

<p class="red"> RED BORDER </p>

<p class="green">GREEN BORDER </p>

<p class="blue">BLUE BORDER </p>

3. Save the file with a .html extension. 

 4. Test the file in a browser.

EXAMPLE OUTPUT:

"ADDING ROUND BORDER"

1. Open NOTEPAD

 2. Type these following codes.

CSS

p.normal{ border:2px solid red; }

 p.round1{ border:2px solid red; border-radius:5px; }

p.round2{ border:2px solid red; border-radius: 8px; }

 p.round3{ border:2px solid red; border-radius: 12px; }

HTML

<p class="normal">

NORMAL BORDER</p>

<p class="round1">

 ROUND BORDER</p>

<p class="round2">

 ROUNDER BORDER</p>

<p class="round3">

ROUNDEST BORDER </p>

</body>

3. Save the file with a .html extension. 

 4. Test the file in a browser.

EXAMPLE OUTPUT: