CSS3 Exciting Border Functions and Features

, , Leave a comment

With version of CSS3, therre are lof of exciting features will be implemented. CSS3 leads togreater flexibility and makes it much easier to recreate previously complex effects. Lot of time-saving rules are being thought up for CSS3:

Today I’m going to explain CSS3 Borders. CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Although only the modern browsers currently support these effects, it’s still fun to see what’s around the corner!

Rounded Borders

{code}

.box

{

background-color: #9eff94;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border: 2px solid #287200;

padding: 10px;

}

{/code}

Final Result

 

Rounded Borders (Specific Corners)

{code}

.box

{

background-color: #9eff94;

-moz-border-radius-topleft: 15px;

-webkit-border-top-left-radius: 15px;

-moz-border-radius-bottomright: 15px;

-webkit-border-bottom-right-radius: 15px;

border: 2px solid #287200;

padding: 10px;

}

{/code}

 

Final Result

Share this: