Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Jul 2010
    Posts
    4
    Member #
    22575
    What Im trying to do is create boxes with curved corners. I can't see to figure out why the top left corner is not showing up, or the gaps in the border along the sides. I tried posting for help in the CSS forum but didn't get any response.

    what Im not understanding is how the code knows what graphic to pull from the sprpanelcrns.png file for the various corners. So if someone could explain it to me or provide me with a link or url that has an explanation I would greatly appreciate it.

    http://surrenderyourwings.com/tester/tester.html

  2.  

  3. #2
    Junior Member
    Join Date
    Jul 2010
    Location
    Asia
    Posts
    4
    Member #
    22872
    Use two layers.
    The first DIV under a second DIV.

  4. #3
    Senior Member
    Join Date
    Dec 2009
    Location
    Chicago, IL
    Posts
    114
    Member #
    20579
    Liked
    2 times
    That looks like a mess. do you need the boxes to have a flexible width?

    Normally I would just use the 3 div method if I didn't need it to be flexible, like this:

    <div class="top-rounded"><!-- set background image on this --></div>
    <div class="middle-rounded"><!-- set repeating background on this -->
    Content goes in here.</div>
    <div class="bottom-rounded"><!-- set background image on this --></div>

    You have to float and clear all 3 so that you don't get gaps in your borders. For flexible width, just add 2 more divs in the top and bottom divs and assign them background images. float these left and right.

    or you can Use CSS3 if you're not concerned with IE users (though IE9 is supposed to support CSS3 rounded corners).

  5. #4
    Junior Member
    Join Date
    Jul 2010
    Location
    Asia
    Posts
    4
    Member #
    22872
    <div class="top-rounded"><!-- set background image on this --></div>
    <div class="middle-rounded"><!-- set repeating background on this -->
    Content goes in here.</div>
    <div class="bottom-rounded"><!-- set background image on this --></div>
    If you want to resize this box vertically, then it's true method.
    if you want to resize box verticaly and horizontally, please use this box (this 3 div's) + second box.

  6. #5
    Junior Member
    Join Date
    Sep 2004
    Posts
    5
    Member #
    7452
    CSS Rounded Corners

    If anyone's interested in the CSS property, it looks like so:

    border-radius:6px 6px 0 0;

    with the different values for top right bottom left corners
    OR, if they're all the same a simple statement, like so:

    border-radius:6px;

    Or you can define them individually like so:

    border-top-left-radius: 4em;
    border-top-right-radius: 4em;
    border-bottom-right-radius: 4em;
    border-bottom-left-radius: 4em;

    Firefox and Safari started supporting this with their own proprietary prefixes, like this:

    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;

    (Altho Firefox's support for the topleft-style notation was a little askew)

    More details in the CSS3 Specification:
    CSS Backgrounds and Borders Module Level 3

    And some deets on the proprietary stuff here:
    CSS3.Info

  7. #6
    Junior Member
    Join Date
    Oct 2007
    Posts
    27
    Member #
    15904
    Have you checked out this tutorial?

    http://www.webdesignforums.net/desig...ss3_35845.html


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:04 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com