Home arrow Style Sheets arrow Modernizr and the border-radius CSS3 Property
STYLE SHEETS

Modernizr and the border-radius CSS3 Property


If you’re ready to take the big plunge and start spicing up your web pages with the flashy features that CSS3/HTML5 bring to the table, but don’t want to pollute your markup with a bunch of CSS conditionals, then take a peek at Modernizr. Packaged under 9KB, Modernizr is a small JavaScript library that let's you use over twenty CSS3 properties and HTML5 elements, based on a simple – yet powerful browser sniffing process.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
April 19, 2011
TABLE OF CONTENTS:
  1. · Modernizr and the border-radius CSS3 Property
  2. · Creating Rounded Corner with

print this article
SEARCH DEVARTICLES

Modernizr and the border-radius CSS3 Property
(Page 1 of 2 )

To demonstrate the capabilities this library provides right out of the box, in prior installments of this series I developed some basic examples, which showed how to make conditional use of the popular “text-shadow”, “box-shadow” and “background” CSS3 properties, simply by relying on the set of custom CSS classes that Modernizr appends on the fly to the web page’s <html> element. If you haven't viewed those parts of the series yet, feel free to visit them:

Of course, if you’re anything like me, you won’t feel inclined to use the library if its functionality is limited to working only with the aforementioned properties. Fear not - Modernizr will let you utilize quite a few others, including the handy “border-radius”, which permits you to add nifty rounded corners to web page elements without having to rely on a single background image.  

In this fourth chapter of the series I’ll be setting up a couple of additional examples, which will show you how to take advantage of the functionality offered by “border-radius”, based on the DOM manipulation that Modernizr does in the background.

Getting Started: Building a Simple (X)HTML Document

As usual, the first step that needs to be taken in order to demonstrate how to use Modernizr with the pertaining “border-radius” property is to create a basic (X)HTML document, which includes the library:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using Modernizr with the 'border-radius' CSS3 property</title>
<script src="modernizr-1.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
    <h1>Using Modernizr with the 'border-radius' CSS3 property</h1>
    <div class="container">
        <h2>This is a sample heading element</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div class="container">
        <h2>This is a sample heading element</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div class="container">
        <h2>This is a sample heading element</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

Similar to the web pages created in previous parts of this series, the above defines three divs which have been assigned a class called “container” (no doubt, my creativity with class names is really astounding). The purpose of creating such elements is simply to decorate them with some engaging rounded corners by using the “border-radius” property.

But hold on a second! In line with the driving logic of Modernizr, if the earlier web page is rendered by a browser supporting the property in question (for instance Firefox) it should dynamically generate a CSS class named “borderradius” as well. So, based on this simple concept, in the following segment I’m going to define the styles that will add to the previous containers the desired rounded corners.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials