Web Development

New Look of CSS3 Borders

New Look of CSS3 Borders is the section 2 of Basics of CSS3.

Borders are not always straight lined in web pages. You might have seen on the web, paragraphs with rounded divisional elements. So how can we do that? We know how to add borders, but how to make them curved???

Patience!! We are going to teach you that just in a moment. Not only rounded borders, but also  many cool things that can come up with borders. Here we go…

Rounded Borders

This technique is used most of the time to highlight a specific content among other content. Look at the following and see how it highlighted.

TED (Technology, Entertainment, Design) is a global set of conferences owned by the private non-profit Sapling Foundation, under the slogan: “Ideas Worth Spreading”. TED was founded in 1984 as a one-off event. The annual conference began in 1990, in Monterey, California.

Having a straight lined border would make this uncool. But the rounded shape gives it a super cool presentation. To have this rounded corner we used the border-radius property other than to the border property which defines the color, thickness and pattern.

[code language=”css”] div{
border-radius: 25px;
}
[/code]

This is the coolest trick that comes with the CSS3. In previous versions we done this using images on four corners. But now on we do not need images to make rounded borders anymore.

 

Shadowed Borders

If the element has a box model we can add a shadow into the box. We called it box shadow. Here is how it looks like.

TED (Technology, Entertainment, Design) is a global set of conferences owned by the private non-profit Sapling Foundation, under the slogan: “Ideas Worth Spreading”. TED was founded in 1984 as a one-off event. The annual conference began in 1990, in Monterey, California.

 

 

This is the code how it was written.

[code language=”css”] div{
box-shadow: 10px 10px 5px #888888;
}
[/code]

Now on we never need Photoshop or any other image editing tool to make our web site look cool. We can do all the colorful fantastic things using CSS3 now on. Check our next trick.

Image Borders

Borders are not always lines. We can flow a image on this border line.

 

border

This is our original border image. See how we used this image to flow around the border of a division tag.

Border Text Following is the code snippet which was used to have this patternized border.

[code language=”css”] #round{
border-image: url(border.png) 30 30 round;
}
#stretch{
border-image: url(border.png) 30 30 stretch;
}
[/code]

By varying the property values of border-image property can get wonderful effects you never knew.


 

As you have seen, now on we do not need Photoshop to have rounded borders, shadowed boxes, or pattenized borders. We discussed all the necessary information to learn this in section. In the next section we are looking at how CSS3 allows a greater control over the background element.

 

WHAT’S NEXT?

See how CSS3 Allows Background Controlling.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW