Box Border

So the first thing we do building our walls in FFSng are the Box which in About me..
lets start in the Basic. the border

Border Widths, Styles, and Colors

The width of borders (border-width)

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels.

The color of borders (border-color)

The property border-color defines which color the border has. The values are the normal color-values for example "#FF0000", "rgb(255, 0, 0)" or "red" .

Types of borders (border-style)

The border-style property specifies what kind of border to display.
None of the border properties will have ANY effect unless the border-style property is set!

There are different types of borders to choose from.

<div style="border: 5px solid #FFD700;">solid </div>

<div style="border: 5px double #FFD700;">double </div>

<div style="border: 5px dashed #FFD700;">dashed </div>

<div style="border: 5px dotted #FFD700;">dotted </div>

<div style="border: 5px groove #FFD700;">groove </div>

<div style="border: 5px ridge #FFD700;">ridge </div>

<div style="border: 5px inset #FFD700;">inset </div>

<div style="border: 5px outset #FFD700;">outset </div>

Layering the border

WE can layer the border such as solid dotted solid

You can create 4 or more layers.

Border Syntax

Top - This value gets assigned to the top portion of the border
Right - This value gets assigned to the right portion of the border
Bottom - This value gets assigned to the bottom portion of the border
left - This value gets assigned to the left portion of the border


NOTE:Without using this border-style property you won't see any borders at all.

Syntax:
border-color: (top) (right) (bottom) (left);
Syntax:
border-color: #CD6889 #8968CD #4493A0 #FFD700;

Border Color

<div style="border-width:6px; border-color: #CD6889 #8968CD #4493A0 #FFD700; border-style: solid">your about me goes here </div>

Border Styles

<div style="border-width:6px; border-color: #CD6889 #8968CD #4493A0 #FFD700; border-style: solid dotted groove double; ">your about me goes here </div>

Border Width

<div style="border-width:6px 10px 15px 20px; border-color: #CD6889 #8968CD #4493A0 #FFD700; border-style: solid dotted groove double; ">your about me goes here </div>

It can be use as divider

Each side of the border can be handled separately.

<div style=" border-top : 4px dotted red ;">testing</div>

<div style=" border-right : 4px dotted red ;">testing</div>

<div style=" border-bottom: 4px dotted red ;">testing</div>

<div style=" border-left : 4px dotted red ;">testing</div>