Developer Ramon Sanchez has something to say ?
Welcome to the scripmaual the database where you an find anything from Css menus to javascript script's and more scripting language. This week we have placed nore css menus that are very simple to integrate ... Check them out »

Advertise your Product on scriptmanual ?
Get your product known with a special format always on top of all categories join the scriptmanual advertiser network. We offer cheap prices for all advertiser's ..get real results... Read more >>

Home » CSS3 Border Radius

Implementing Examples of CSS3 Border-Radius


The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Capability: Firefox, Safari/Chrome, Opera and IE9

The border-radius property is used as follows

-moz-border-radius:10px;-border-radius:10px;border-radius:10px;

Implementing the Script: The CSS 3 Code


<style>

#div-id-or-class-name-here{
-moz-border-radius:10px;
-border-radius:10px;
border-radius:10px;
background:#fa0;
}
/* This is the Hover Effect Changes 
the hover text-shadow to #999 - Provided by Scriptmanual.com
& WebMaster Ramon Sanchez */


#div-id-or-class-name-here:hover{ -moz-border-radius:15px; -border-radius:15px; border-radius:15px; } </style>
Recommended to add inside the <head> of the Page. but can be used anywhere in the body as well or added to your stylesheet.

Browser Support

At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).

Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification. Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.

Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).

Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).


W3C Specification Mozilla Implementation
border-radius /* Four Corners Border */ -moz-border-radius
border-top-left-radius /* Top Left Border */ -moz-border-radius-topleft
border-top-right-radius /* Top Right Border */ -moz-border-radius-topright
border-bottom-right-radius /* Bottom Right Border */ -moz-border-radius-bottomright
border-bottom-left-radius /* Bottom Left Border */ -moz-border-radius-bottomleft

Was this article & Examples Helpful ?

If so you can help us bring this and more to become available for you at anytime. You can help us by donating any amount or Sharing & Following Us.. P.S Web hosting cost us alot of money..

Business Services

Graphics Design

  • Business CardsBusiness Cards
    Just $35 per card. Order / More Info »
  • Logo DesignLogo Design
    Just $55 per logo. Order / More Info »
  • Company BrochureCompany Brochure
    Just $65 each. Order / More Info »
  • Website Listing inWebsite Listing in 2,000 Directories
    Just $35 each. Order »
  • Party / Events Flyers DesignParty / Events Flyers Design
    Just $55 each. Order »
  • Advertisement Units Design & Flash AdsAdvertisement Units Design & Flash Ads
    Leaderboard (728 x 90) - $95
    Banner (468 x 60) - $40
    Skyscraper (120x600) - $125
    Skyscraper2 (160x600)- $130
    Half Banner (234x60) - $75

    Order Now » We can design your custom
    Ad banners in days.
  • Social Buttons For Websites
    Just $55. More Info »
    ~ Example below ~

Follow Us

Website Design queens ny Linked In NYWDS.com

Developer's Tip

  • Ramon Sanchez
    TIP: # 256 | Meta Tags
    When adding META TAGS make sure you dont over Repeat the keywords it wont help with SEO.Keep it Simple dont overdue it...