dream genie
 
CMS and Website Builder
contact us
 
+44 (0)1392 202078
 
 
You are here: Home > Blog > How to create rounded corners   Go Back

How to create rounded corners

Posted: Monday, 13rd December, 2010 at 9:49 PM
Dec
13
 

Rounded corners


There are a number of ways to achieve rounded corners, some modern browsers already support them via native CSS, firefox, Google Chrome, Safari all have buit in support, however Microsoft Internet Explorer does not.

At the time of writing this article the current version of Explorer is IE8 and rounded corners has to be achieved through other mechanisms.

This article looks at one possible method of creating rounded corners for IE using dreamgenie's support of the jquery.corner library.

Dreamgenie includes the jquery libraries which can be used for many effects and extensions, rounded corners is just one example.

Include the jquery corner library


Include the following in your section [ Site Settings|Google JS CSS] in the [ Additional CSS] box

< script  type = "text/javascript" src = "/_javascript/jquery.corner.js" > script >

NOTE : Jquery corner uses the parent background color to create the corner effect so if your corners dont appear it's probably this that needs looking at.

Also you may need to tell jquery about the width of your element, if so use the following CSS, you may want to add the ID or CSS class of the element  at the front to restrict the scope as the example below would be global CSS.


.jquery-corner{width:950px;} 

And finally the required code to round the corners is...

$('.rootparent').corner("round 5px");  

The classname .rootparent in the example above is the required class to be used for rounding the horizontal main menu, this would apply to all dreamgenie websites.

NOTE: The example above rounds all four corners of the specified element, if you want to round specific corners i.e. top-left, top-right etc use tl tr bl br as follows for top-left and top-right


$('.rootparent').corner("round tl tr 5px");  

Reference : http://www.malsup.com/jquery/corner/


 


Visit the blog archive »

You are welcome to post a comment


To Verify You are Human!
Please enter the code above:

Previous Comments

None