The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images. CSS rounded corners thus save us time in creating images and requests to the server. Today, rounded corners with CSS are supported by all of the major browsers: Safari, Chrome, Internet Explorer, Opera, and Firefox. Let’s look at
border-radius
syntax, caveats, and Internet Explorer support.Syntax and Standards
The CSS3 standard property for applying rounded corners isborder-radius
. This property is added to elements just as naturally as width
or positional properties are:.roundElement { border-radius: 10px; }The preceding statement assigns one rounded corner value to each of the element’s four corners. A specific border radius may also be added to each to elements individually:
.pearElement { border-top-left-radius: 7px; border-top-right-radius: 5px; border-bottom-right-radius: 6px; border-bottom-left-radius: 8px; }A shorthand
border-radius
syntax is also available where application:.oddRoundElement { border-radius: 12px 5px 12px 5px; /* or */ border-radius: 12px 5px; }The pattern details top-left, top-right, bottom-right, bottom-left.
Browser Support and Prefixes
Since rounded corner elements andborder-radius
were not a set standard, each browser implemented their own prefixed {prefix}-border-radius
implementation. Those prefixes look like:-moz-border-radius: 20px; -webkit-border-radius: 20px; -o-border-radius: 20px; /* firefox's individual border radius properties */ -moz-border-radius-topleft:15px; /* top left corner */ -moz-border-radius-topright:50px; /* top right corner */ -moz-border-radius-bottomleft:15px; /* bottom left corner */ -moz-border-radius-bottomright:50px; /* bottom right corner */ -moz-border-radius:10px 15px 15px 10px; /* shorthand topleft topright bottomright bottomleft */ /* webkit's individual border radius properties */ -webkit-border-top-left-radius:15px; /* top left corner */ -webkit-border-top-right-radius:50px; /* top right corner */ -webkit-border-bottom-left-radius:15px; /* bottom left corner */ -webkit-border-bottom-right-radius:50px; /* bottom right corner */Essentially you would need to make a separate declaration for each browser. Adding the same rule for different browsers is annoying so adoption of the standard
border-radius
is important.Internet Explorer Support
Internet Explorer did not supportborder-radius
until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag and provide the border radius:<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <style> border-top-right-radius: 7px; border-top-left-radius: 7px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; </style>While many solutions have been presented, I’ve found the best to be a small JavaScript-powered solution called CurvyCorners. CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, event supporting anti-aliasing.
Using CurvyCorners is quite simple. The first step is adding the
CurvyCorners.js
file to the page:<!-- SIMPLY INCLUDE THE JS FILE! --> <script type="text/javascript" src="curvy.corners.trunk.js"></script>CurvyCorners detects the presence of
border-radius
on DOM elements and works its magic to duplicate the effect in IE. There are no images involved. You may also identify specific elements to apply rounded corners to:var settings = { tl: { radius: 12 }, tr: { radius: 12 }, bl: { radius: 12 }, br: { radius: 12 }, antiAlias: true }; /* moooo */ $('.round').each(function(rd) { curvyCorners(settings,rd); });I highly recommend specifying elements to add rounded corners to, as checking the entire page is a taxing process; remember that the rounding occurs on every single page load.
Rounded corners may be achieved with CSS’
border-radius
property in Internet Explorer, Firefox, Safari, Chrome, and Opera. This small feature opens a new realm of possibilities in bridging design and code. Now that browser support is abundant and browsers are beginning to use a standard border-radius
property name, there are really no drawbacks to relying on CSS for your rounded corners.Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.
Full David Walsh Blog Post: CSS Rounded Corners
Related posts:
"
No hay comentarios:
Publicar un comentario