JSFiddle - React, Tailwind, and code Playground

by ajayogal

HTML

<!--border demo-->
Part I
<div class="ex">total width of this div is 250px</div>


<!-- border-style demo-->
Part II
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

<p style="border: 1px none #000000;padding:3px;">none: Defines no border</p>
<p style="border: 1px dotted #000000;padding:3px;">dotted: Defines a dotted border</p>
<p style="border: 1px dashed #000000;padding:3px;">dashed: Defines a dashed border</p>
<p style="border: 1px solid #000000;padding:3px;">solid: Defines a solid border</p>
<p style="border: 3px double #000000;padding:3px;">double: Defines two borders. The width of the two borders are the same as the border-width value</p>
<p style="border: 5px groove #98bf21;padding:3px;">groove: Defines a 3D grooved border. The effect depends on the border-color value</p>
<p style="border: 5px ridge #98bf21;padding:3px;">ridge: Defines a 3D ridged border. The effect depends on the border-color value</p>
<p style="border: 5px inset #ffcc00;padding:3px;">inset: Defines a 3D inset border. The effect depends on the border-color value</p>
<p style="border: 5px outset #ff0000;padding:3px;">outset: Defines a 3D outset border. The effect depends on theborder-color value</p>


<p id='border_outline_demo'>this is border outline demo along with padding and margin</p>

CSS

div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

p.one 
{
border-style:solid;
border-width:5px;
}
p.two 
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}


p#border_outline_demo{
    border-width: 4px;
    border-style: solid;
    outline-width:2px;
    outline-style:solid;
    outline-color: #ff0000;
    border-color:#ffff00;
    margin: 103px 40px 50px 20px;
    background: #ccc;
    padding: 10px;
}