≡ Menu

Few Handy Techniques for Creating CSS3 Borders

If you are looking to sharpen your CSS3 skills, then one thing you should learn about is how to create nicely looking borders that will change the appearance of a website. Here are some handy techniques that will help you make better looking borders while using CSS3.

Using Border Style

No borders will appear on your website unless you use the Border Style property. You can choose from the solid style, that will show the border as a continuous line, the dotted style, that will show the border as a dotted line, the groove style that will show the border in two tones of the same color, or the double style, that will trace the border with two parallel lines with an interval between them. What is great about Border Style is that you can choose a different style for each of the lines included in the border.

Using the CSS3 border property

There are many things you can do using the CSS3 border property. Using this property, you can change the width, the color and the type of your border. You will be amazed to see how many types of borders you can obtain just by using this property.

Border Radius

In case you want to obtain rounded borders, you need to use the Border Radius property that is supported by all the important browsers, such as IE9, Opera, Mozilla, Chrome and Safari. While the first two browsers allow you to use the same code, keep in mind to use the ‘-moz-’ prefix for Mozilla, and the ‘-webkit-’ prefix for Chrome and Safari. The best part for this property is that you can now obtain rounded corners without having to appeal to images.

Box Shadow

A new feature that comes with CSS3 is Box Shadow that allows you to drop shadows around the elements including borders. This will add more nice effects to your borders, as you will be able to lend more depth to the entire design.

Border Width

A nice play on the design of your borders can be obtained by modifying Border Width parameters. After you learn the right sequence, which is top, right, bottom, left for the lines making the border, you can easily modify the width for each of them, by introducing the values (in pixels) you want for each of them.

How to obtain a hemisphere look on your borders

If you want your borders to look like hemispheres, it is quite easy to obtain the effect. This is the code you have to introduce:

border-radius:100px 100px 0 0

In case you are using more browsers, make sure to introduce the respective code. Of course, the 100px value used here is just for sampling purposes, and you can modify it as you see fit.

How to obtain a rounded rectangle

In case you want a different look for your borders, here is an idea. Introduce this line:

border-radius: 20px

in your code and watch the effect unravel.

How to obtain a leaf aspect

The next line of code must be introduced if you aim for a leaf look for your borders:

border-radius: 0 120px 0 120px.

Author Bio:- I am John S Lam from Pass Certification; it gives 100% guaranteed success in your MCSE Certification Preparation exam. Let’s take benefit of MCTS Certification Preparation Exams material efficiently and get guaranteed success. Check out free demo of all certifications Exam.

{ 0 comments… add one }

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.