Create Rounded Corners using HTML5, CSS3

Discussion in 'HTML5 and CCS3' started by PeakSter, Dec 29, 2012.

  1. Inspired

    PeakSter Administrator

    Message Count:
    Likes Received:
    Skipping Corners: Modern Web Programming Techniques to Make Rounded Corners using HTML, HTML5, CSS or JavaScript

    Nobody, especially not a Web designer, wants to be a square. In fact, today’s Web designers take the advice “don’t be a square” very seriously indeed. The plain fact is that the majority of stylish, attractive and modern Web designs feature curves. However, a Web designer that wishes to use rounded corners must use special techniques. Curves, and the techniques used to get them, are a critical part of the craft of modern Web design and development. This article provides an overview of the technical techniques used to generate rounded corners.

    Advantages of Rounded Corners
    Rounded corners have a single, principle advantage: they enhance the visual appeal of a page. This can make a Web page much more appealing to viewers and can enhance the distinctiveness of a page, helping visitors to remember the page and return at a later date.

    There are a number of very real disadvantages to the use of rounded corners. A Web design that features rounded corners often uses space less efficiently than one that does not. This is because a paragraph that uses curved corners generally must have wider margins and therefore cannot include as much text. Moreover, a programmer must use special techniques if he wishes to create rounded corners. These techniques may not work in all browsers and may need updating from time to time, as browsers are updated and improve.

    Web programmers use a variety of techniques to add rounded corners to Web pages. Unfortunately, none of these techniques are perfect—all have significant disadvantages. Because elements on a Web page are square by default, it isn’t easy to create rounded corners. In an almost literal sense, Web programmers who wish to create rounded corners must fit a square peg into a round hole.

    Pre-CSS3 Techniques
    Prior to CSS3, Web browser support for rounded corners was very poor. Web browsers that allowed for rounded corners implemented the feature idiosyncratically, if at all. Unfortunately, many people still use Internet browsers from this era. However, it is possible to readily implement rounded corners using CSS in almost all browsers except for Internet Explorer. Mozilla browsers provide the “-moz-border-radius” property, and Webkit browsers provide a “-webkit-border-radius” property that allow Web programmers to easily create rounded corners.

    Internet Explorer, which is often problematic, does not allow Web programmers to easily create rounded corners using CSS. Various hacks are available around the Internet, but most are very difficult to use.

    Rather than using CSS to create rounded corners, you may wish to simply use GIF images. This technique works in any browser, including old versions of Internet Explorer. GIF images, if they are of a single color, can be surprisingly lightweight. This makes them an excellent alternative to the complicated and error prone techniques required to implement rounded corners programmatically. Often, you can implement rounded corners by nesting three DIVs within a single parent DIV. Stack the DIVs on top of each other vertically. Set the “background-image” properties of the top and bottom DIVs equal to images that contain rounded corners. Add content to the center DIV, and set its “background-color” property equal to the appropriate color. Viola! You have rounded corners that will work in any browser.

    Many Internet programmers reject this idea out of hand over bandwidth concerns. But those who take the time to create a sample GIF and check its size will likely be very surprised by the slim weight of the image. If you’re still concerned, you can use a sprite to allow for efficient transfer of images, or rotate a single image and use it to cap both the bottom and top of a DIV.

    Some might attempt to creating four images, and embedding in a corner of a parent DIV. However, this is not recommended because it takes the browser a very long time to download four separate images. However, you could rotate a single image and use it on each corner of a parent DIV, if you prefer. This technique is difficult to implement across different browsers, unless you are willing to use HTML tables. Most Web designers strong prefer to avoid working with HTML tables.

    It is possible to create rounded images using JavaScript. You can implement this feature using raw JavaScript, but this will prove painful to implement. It’s better to use a JavaScript library to implement rounded corners in JavaScript. Nearly all JavaScript libraries offer an easy-to-use implementation of rounded corners. For example, jQuery offers several plug-in implementations of a rounded corner.

    HTML 5
    HTML5 and CSS3 allow Web programmers to easily create rounded corners. CSS3 allows programmers to specify the size exact shape of a corner and also allows them to easily add border images. CSS3 even allows Web programmers to easily rotate border images, so that they can easily reuse a single image on all four corners of an element.

    The problem with this excellent technique is that many people have yet to upgrade to a modern, HTML5 browser. It will be many years before a Web page can rely on HTML5 and CSS3 to create rounded corners, owing to slow consumer adoption.

    While many Web programmers favor rounded corners, not single technique for creating rounded corners at present works perfectly. Perhaps the best solution is to use images of rounded corners to cap the top and bottom of elements. This solution works across all browsers, and requires only modest bandwidth.

    Join us and Comment this Article!

    bye, PeakSter
  2. Cynical

    carbonize Active Member

    Message Count:
    Likes Received:
    Not strictly true. Most people are using atleast IE9 and people using Chrome, Firefox, Opera etc tend to keep it up to date and so all will have border-radius support. It's just people on older systems like XP or those at work forced to use IE6 that will not see them but then they will just see square borders. But the nature of border-radius is that whilst square borders may not be what you wanted it's unlikely they will ruin the pages legibility.

    As to wasting space you will always have padding and margins even with square borders just for legibility anyway.
    PeakSter likes this.

Share This Page