DIV Style Web | Webmasters | Wapmasters

Sharing The Programming
Experience

SIMPLE DIV STYLE

outset

<div style="background-color: pink; border: 6px outset green;"><font color="green"><b>outset</b></font></div>

inset

<div style="background-color: pink; border: 6px inset green;"><font color="green"><b>inset</b></font></div>

double

<div style="background-color: pink; border: 3px double green;"><font color="green"><b>double</b></font></div>

groove

<div style="background-color: lime; border: 6px groove lime;"><font color="red"><b>groove</b></font></div>

solid

<div style="background-color: red; border: 2px solid yellow;"><font color="yellow"><b>solid</b></font></div>

ridge

<div style="background-color: green; border: 2px ridge silver;"><font color="silver"><b>ridge</b></font></div>

dotted

<div style="background-color: #ff00ff; border: 2px dotted white;"><font color="white"><b>dotted</b></font></div>

COMPLEX DIV STYLE

Your Text

<div style="border: transparent 1px solid;"><div style="border: #808080 1px dashed;"> <div style="border: #909090 1px solid;"> <div style="border: #F0F0F0 1px solid;"> <div style="border: #909090 1px solid;"> <div style="border: #808080 1px dashed;"> Your Text</div> </div> </div> </div> </div> </div>

Your Text

<div style="border: transparent 1px solid;"><div style="border: #880055 1px dashed;"> <div style="border: #990055 1px solid;"> <div style="border: #ff00ff 1px solid;"> <div style="border: #990055 1px solid;"> <div style="border: #880055 1px dashed;"> Your Text</div> </div> </div> </div> </div> </div>

Your Text

<div style="border: transparent 1px solid;"><div style="border: #00008F 1px dashed;"> <div style="border: #00009F 1px solid;"> <div style="border: #0000FF 1px solid;"> <div style="border: #00009F 1px solid;"> <div style="border: #00008F 1px dashed;"> <center> Your Text</center> </div> </div> </div> </div> </div> </div>

Your Text

<div style="border: transparent 1px solid;"><div style="border: #008000 1px dashed;"> <div style="border: #009000 1px solid;"> <div style="border: #00F000 1px solid;"> <div style="border: #009000 1px solid;"> <div style="border: #008000 1px dashed;"> <center> Your Text</center> </div> </div> </div> </div> </div> </div>

Your Text

<div style="border: transparent 1px solid;"><div style="border: #694900 1px dashed;"> <div style="border: #795900 1px solid;"> <div style="border: orange 1px solid;"> <div style="border: #795900 1px solid;"> <div style="border: #694900 1px dashed;"> <div style="background-color: transparent;"> <div style="border: transparent 1px dashed;"> <center> Your Text</center> </div> </div> </div> </div> </div> </div> </div> </div>

Your Tex

<div style="border: transparent 1px solid;"><div style="border: #880000 1px dashed;"> <div style="border: #990000 1px solid;"> <div style="border: #ff0000 1px solid;"> <div style="border: #990000 1px solid;"> <div style="border: #880000 1px dashed;"> <center> Your Tex</center> </div> </div> </div> </div> </div> </div>

Your Tex

<div style="border: 2px solid#00001f;"><div style="border: 2px solid#00002f;"> <div style="border: 2px solid#00003f;"> <div style="border: 2px solid#00004f;"> <div style="border: 2px solid#00005f;"> <div style="border: 2px solid#00006f;"> <div style="border: 2px solid#00007f;"> <div style="border: 2px solid#00008f;"> <div style="border: 2px solid#00009f;"> <center> Your Tex</center> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Your Tex

<div style="border: 2px solid#101010;"><div style="border: 2px solid#202020;"> <div style="border: 2px solid#303030;"> <div style="border: 2px solid#404040;"> <div style="border: 2px solid#505050;"> <div style="border: 2px solid#606060;"> <div style="border: 2px solid#707070;"> <div style="border: 2px solid#808080;"> <div style="border: 2px solid#909090;"> <center> Your Tex</center> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Your Tex

<div style="border: 2px solid#391900;"><div style="border: 2px solid#492900;"> <div style="border: 2px solid#593900;"> <div style="border: 2px solid#694900;"> <div style="border: 2px solid#795900;"> <div style="border: 2px solid#896900;"> <div style="border: 2px solid#997900;"> <div style="border: 2px solid#A98900;"> <div style="border: 2px solid#B99900;"> <center> Your Tex</center> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Your Tex

<div style="border: 2px solid#777700;"><div style="border: 2px solid#888800;"> <div style="border: 2px solid#999900;"> <div style="border: 2px solid#AAAA00;"> <div style="border: 2px solid#BBBB00;"> <div style="border: 2px solid#CCCC00;"> <div style="border: 2px solid#DDDD00;"> <div style="border: 2px solid#EEEE00;"> <div style="border: 2px solid#FFFF00;"> <center> Your Tex</center> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Your Tex

<div style="border: 2px solid#001000;"><div style="border: 2px solid#002000;"> <div style="border: 2px solid#003000;"> <div style="border: 2px solid#004000;"> <div style="border: 2px solid#005000;"> <div style="border: 2px solid#006000;"> <div style="border: 2px solid#007000;"> <div style="border: 2px solid#008000;"> <div style="border: 2px solid#009000;"> <center> Your Tex</center> </div> </div> </div> </div> </div> </div> </div> </div> </div>

YOUR TEXT HERE

<div style="background-color: black; border-style: ridge; border-width: 4px; border-color: yellow; margin: 2px; padding: 2px;"><table align='center' width='100%' border='2px'> <tr><td align='center' bgcolor='black'><font color="yellow">YOUR TEXT HERE</font><br /><b></b></td></tr> </table> </div>

YOUR TEXT HERE

<div style="border: 2px solid#191920;"><div style="border: 2px solid#191930;"> <div style="border: 2px solid#191940;"> <div style="border: 2px solid#191950;"> <div style="border: 2px solid#191960;"> <div style="border: 2px solid#191970;"> <div style="border: 2px solid#191980;"> <div style="border: 2px solid#191990;"> <div style="border: 1px solid#00ff00;"> <div style="border: 2px solid#000000;"> <div style="border: 1px solid#00ff00;"> <div style="background-color: #000080;"> <b><font color="yellow"><center> YOUR TEXT HERE</font></b></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Welcome !

YOUR TEXT HERE

<div style="border: 2px dotted blue;"><div style="border: 2px dotted red;"> <div style="border: 2px dotted yellow;"> <font color=lime><b><center> Welcome !</center> </b></font></div> </div> </div> <div style="border: 2px dotted blue;"><div style="border: 2px dotted red;"> <div style="border: 2px dotted yellow;"> <font color=lime><b><center> YOUR TEXT HERE</center> </b></font></div> </div> </div>

Your Text

<div style="border: 2px solid#100000;"><div style="border: 2px solid#200000;"> <div style="border: 2px solid#300000;"> <div style="border: 2px solid#400000;"> <div style="border: 2px solid#500000;"> <div style="border: 2px solid#600000;"> <div style="border: 2px solid#700000;"> <div style="border: 2px solid#800000;"> <div style="border: 2px solid#900000;"> <center> Your Text</center> </div> </div> </div> </div> </div> </div> </div> </div> </div>

YOUR TEXT HERE

<div style="border: 2px solid#CCCC00;"><div style="border: 2px solid#AAAA00;"> <div style="border: 2px solid#777700;"> <div style="border: 2px solid#555500;"> <div style="border: 2px solid#333300;"> <div style="border: 2px solid#111100;"> <center> <font color="lime">YOUR TEXT HERE</font></center> </div> </div> </div> </div> </div> </div>

YOUR TEXT HERE

<div style="border: 1px solid #111111;"><div style="border: 1px solid #222222;"> <div style="border: 1px solid #333333;"> <div style="border: 1px solid #444444;"> <div style="border: 1px solid #555555;"> <div style="border: 1px solid #666666;"> <div style="border: 1px solid #777777;"> <div style="border: 1px solid #888888;"> <div style="border: 1px solid #999999; background-color: #000000;"> <center> <font>YOUR TEXT HERE</font></center> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Welcome!

YOUR TEXT HERE

<div style="background-color: black; border-style: ridge; border-width: 1px; border-color: orange; padding: 1px; margin: 1px;"><div style="background-color: red; border-style: ridge; border-width: 1px; border-color: red; padding: 1px; margin: 1px;"> <center> Welcome!</div> </div> <div style="background-color: black; border-style: ridge; border-width: 1px; border-color: red; padding: 1px; margin: 1px;"> YOUR TEXT HERE </div> <br />

YOUR TEXT HERE

<div style="border: 3px dotted blue;"><div style="border: 3px dotted #ff0099;"> <div style="border: 3px dotted lime;"> <div style="border: 3px dotted #660099;"> <font color=lime><b><center> YOUR TEXT HERE</center> </b></font></div> </div> </div> </div>

YOUR TEXT HERE

<div style="border: 2px solid blue;"><div style="border: 2px solid #ff0099;"> <div style="border: 2px solid lime;"> <div style="border: 2px solid red;"> <font color=lime><b><center> YOUR TEXT HERE</center> </b></font></div> </div> </div> </div>

YOUR TEXT HERE

<div style="background: #444400; border-top: #777700 1px solid; border-left: #111100 1px solid; border-right: #111100 1px solid; border-bottom: #777700 1px solid; padding: 1px; margin: 1px;"><center> YOUR TEXT HERE</center> </div>

YOUR TEXT HERE

<div style="border: 2px solid#666666;"><div style="border: 2px solid#555555;"> <div style="border: 2px solid#444444;"> <div style="border: 2px solid#333333;"> <div style="border: 2px solid#222222;"> <div style="border: 2px solid#111111;"> <center> YOUR TEXT HERE</center> </div> </div> </div> </div> </div> </div>

YOUR TEXT HERE

<div style="border: 3px solid#00FF00; margin: 1px; padding: 1px;"><div style="border: 2px solid#009900 ; background: #990000; margin: 5px; padding: 1px;"><center> <font color="#00FF00"><b>YOUR TEXT HERE</b></font></div> </div>

Welcome!
YOUR TEXT HERE

<div style="border: 2px solid#001100;"><div style="border: 2px solid#003300;"> <div style="border: 2px solid#005500;"> <div style="border: 2px solid#007700;"> <div style="border: 2px solid#007700;"> <div style="border: 2px solid#005500;"> <div style="border: 2apx solid#003300;"> <div style="border: 2px solid#001100;"> <p align="center"> <font color="red"><b>Welcome!<br/>YOUR TEXT HERE</b></font><br/></div> </div> </div> </div> </div> </div> </div> </div>