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

Thread: Rounded borders

  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Hi,
    Is it possible to make rounded corners for borders of a div or borders of a table with css?
    I found this line of code somewhere but it does not seem to work ...
    border-radius: 10px;
    so, the picture hor2c.jpg still displays with non rounded corners....
    .horizline1
    {
    width:900px;
    height:81px;
    border:1px gray;
    position:absolute;
    left:5px;
    top:206px;
    border-radius: 8px;
    background-image:url('pictures/hor2c.jpg');
    }


    Thanks

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times


  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I made one here on the right hand side.

    You need 3 images: top, middle, bottom
    Alter the code to your own specs.

    code:

    <div id="HomeBoxRight">
    <div class="box_top"></div>
    <div class="box_middle">
    <div class="inner_box">
    <img src="images/heading_latest.jpg" />

    <p><img src="images/link_pics/prestige_home_pic2.jpg" width="469" height="178" />
    </p>

    <a href="galleries/baker_gallery/index.html" target="_blank">
    <img src="images/link_pics/baker_machining_home_pic2.jpg" width="469" height="178" />
    </a>

    </div>
    </div>
    <div class="box_bottom"></div>
    </div>

    css:

    #HomeBoxRight {
    position: absolute;
    width: 510px;
    left: 452px;
    top: 352px;

    }

    .inner_box{
    line-height:14pt;
    color: #000033;
    text-align:justify;
    width:460px;
    padding:0 0 0 20px

    }
    .box_top{
    background: url(images/box_top.jpg) no-repeat;
    height:25px;
    margin-bottom:0;
    }
    .box_middle{
    background: url(images/box_middle.jpg) repeat-y;
    }
    .box_bottom{
    background: url(images/box_bottom.jpg) no-repeat;
    height:44px;
    }

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    You can do it without images using http://www.curvycorners.net/

  6. #5
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    The code you have seen is for CSS3, and it doesn't work in all browsers, and because it is CSS3, the CSS won't validate if you care about that sort of thing...
    Anyway, how to do it is here.
    Semantic, Valid, and Accessible Design!


  7. #6
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    On a side note, you could always use the CSS 3 for browsers that render it, and then feed an alternate stylesheet with rounded corner images to browsers that don't.
    Semantic, Valid, and Accessible Design!



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 11:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com