Porfolio

My Drawings

 

Multiple Columns

-moz-column-count: 3;
-moz-column-gap: 5px;
-webkit-column-count: 3;
-webkit-column-gap: 5px;
column-count: 3;
column-gap: 5px;

column-count and column-width are the two most basic ways to define the properties of a multi-column element.

#multicolumnElement {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

column-gap

#multicolumnElement {
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
}

column-rule

#multicolumnElement {
    -webkit-column-rule: 1em solid #000;
    -moz-column-rule: 1em solid #000;
    column-rule: 1em solid #000;
}

column-break

 h2 {
    -webkit-column-break-before:always;
    -moz-column-break-before:always;
    column-break-before:always;
}

Spanning columns

h2 {
    -webkit-column-span:all;
    -moz-column-span:all;
    column-span:all;
}

h3{
    -webkit-column-span:2;
    -moz-column-span:2;
    column-span:2;
}

Filling columns

#multicolumnElement {
    -webkit-column-fill:auto;
    -moz-column-fill:auto;
    column-fill:auto;
}

border radius

-webkit-border-radius: 5px;  /* chrome */

-moz-border-radius: 5px;  /* Moziila*/

border-radius: 5px;  /* Opera and IE 10*/

this is css3.

In box apply the corner reduce the size.

please see below code. and apply your web site.

Copy the code in Notpad and save as this name radius.html and see the magic.

The border-radius property allows you to add rounded corners to elements.