CSS3 Borders Preview

CSS3 Borders Preview

Want to customise the boxes in your website?

This plug-in allows you to customize the borders of your borders. It allows you to customize borders to a new level with the ability to use gradients, rounded corners, shadows and border images. The boxes can be given the settings, either on the top alone or even in the bottom too. Such variety of options is given to the web designer to make the appearance of the website much more appealing. For a further understanding, view the examples given below.

Example 1 – Rounded Borders

[javascript language="css"]background-color: #DAE8EC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #B8CB99;
padding: 10px;[/javascript]

Example:

Example 2 – Rounded Borders (Specific Corners)

[javascript language="css"]background-color: #DAE8EC;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border: 2px solid #B8CB99;
padding: 10px;[/javascript]

Example:

You can use the following properties for Mozilla-Firefox / Safari.

If you want to know more about this code, you may grab the script at the below link:

http://www.cssportal.com/css3-preview/borders.htm

To get the version of the script integrated within a live template visit the website whose link is mentioned here: Boxedart.com

Interested? Want to keep yourselves updated with the latest JavaScripts and codes? Try this website a1javascripts.com for more jQuery, CSS and HTML5 techniques.

JQuery is a very powerful tool, the more you learn about, more will you be amazed what it is capable of. Stay with us for lot of upcoming articles, Guidelines with plenty of great tutorials, Resources, etc.

Comments are closed