SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Rounded Corners

Hybrid View

  1. #1
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded Corners

    Not sure if this is in the correct forum.....

    But, how do you make a div have rounded corners?

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Couple of popular ways:
    CSS - http://www.pmob.co.uk/temp/willow.htm (view the source or save the page). Uses images to get the corners.

    jQuery - http://methvin.com/jquery/jq-corner-demo.html
    Uses the popular jQuery javascript library.

    Google
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I add the JQuery option to the following code?:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    <style>
    #div
    {
      WIDTH: 480px;
      HEIGHT: 132px;
      BORDER: 1px solid RGB(0,0,0);
    }
    </style>
    </head>
    
    <body>
    <div id="div"></div>
    </body>
    </html>

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You need to download the jQuery Library if you havent got it already. (jquery.com) then read the instructions on http://methvin.com/jquery/jq-corner.html specifically the:
    How to harness this creation

    First, get a copy of JQuery (a relatively fresh copy is kept here) and then a copy of jquery.corner.js. View the demo page and its source, and it should all fall into place. The corner function takes one string argument: $().corner("effect corners width") The effect is the name of the effect to apply, such as round or bevel. If you don't specify an effect, rounding is used. The corners can be one or more of top, bottom, tr, tl, br, or bl. By default, all four corners are adorned. The width specifies the width of the effect; in the case of rounded corners this will be the radius of the width. Specify this value using the px suffix such as 10px, and yes it must be pixels.

    If you're new to jQuery, the $(…) stuff may be puzzling. It's actually pretty easy. Use a string just like a CSS selector to select the elements you want to use. So, to round all divs with the class of "rounded", you'd use $("div.rounded").corner(). To use a 4 pixel bevel on the element with the id of "slant" you'd use $("#slant").corner("bevel 4px").
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •