Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rounded corners on borders

    I am having trouble finding good information on how to make rounded borders using images. I need to know the simplest way of going about this. Any help would be much appreciated.
    Need help with your tennis game visit the Chattennis.com tennis forums, tennis chat, and tennis articles.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello phpnewb,
    I think the simplest is to have a top image that has both left and right corners and the top border. Place that image like a header.
    Same with a bottom image.
    Then put a container div in the middle with borders that line up to your top and bottom images.

    Like this
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Exactly how would I go about doing this?
    Need help with your tennis game visit the Chattennis.com tennis forums, tennis chat, and tennis articles.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Here’s an example. This one assumes a fixed‐width box, that you want all four corners rounded, and that transparency will not be used for the corners. It requires three images.

    For corner transparency, you need to stack the boxes instead of nesting them. For a box that isn’t fixed‐width, you probably need two more boxes.

    HTML:
    Code:
    <div id="box">
      <div>
        <div>Content</div>
      <div>
    </div>
    CSS:
    Code:
    div#box {
      width: 200px;
      background: url("middle.png") repeat-y; /* 200×1 pixels */
      }
    div#box > div {
      padding-top: 20px;
      background: url("top.png") no-repeat; /* 200×20 pixels */
      }
    div#box > div > div {
      padding-bottom: 20px;
      background: url("bottom.png") bottom left no-repeat; /* 200×20 pixels */
      }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Exactly how would I go about doing this?
    I thought I was showing you exactly how to do it. Did you look at the code on the example I linked?

    Arbitrator's example is very elegant - if you could see the images he means for it to use it might be easier to understand.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    to make this fluid would I just change the box width from pixels to percentage.
    Need help with your tennis game visit the Chattennis.com tennis forums, tennis chat, and tennis articles.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by phpnewb View Post
    to make this fluid would I just change the box width from pixels to percentage.
    No, you would need to nest more boxes. In the example I showed above, the top and bottom sets of corners are joined to minimize the number of images and markup required; this is why it’s fixed width.

    To get a completely fluid, rounded‐corner box, I believe that you’d have to nest at least two more boxes and have at least two more background images. You should be able to build one off of the previous example or maybe someone else will show you how.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This isn't about round borders, but round corners.
    Code:
     
    	#main-right{	margin-right:2%;
    	     width:24%;
    	   
    	float:right;}
    .roundedtopa {
    	background: url(img/righttopcornerlink3.jpg) no-repeat top right;
    	}
     .roundedbottoma {
    	background: url(img/leftbottomcornerlink3.jpg) no-repeat top right;
    	}
    img.corner {
    	width: 15px;
    	height: 15px;
    	border: none;
    	display: block !important;
    	}
    Code:
    <div id="main-right">
    <div class="roundedtopa">
    		<img src="img/lefttopcornerlink3.jpg" alt="" 
    		width="15" height="15" class="corner"
    		style="display: none" />
    	</div>
    <center>
    <h3>Login</h3>
    
    
    	<form method="post" action="phpBB2/login.php">
    
    	Username <input type="text" class="post" name="username" size="30">
    <div id="password">
    	Password <input type="password" class="post" name="password" size="30">
    	Remember me <input type="checkbox" name="autologin" />
    </div>
    
    <div id="submit-reset">	
    	<input type="submit" value="Log in" class="mainoption" name="login"> <br>
    	<input type="hidden" name="redirect" value="" />
    	Not a member <a href="phpBB2/profile.php?mode=register">Register</a><br>
    	<font size="2">It's free and easy.</font><br>
    	<a href="phpBB2/profile.php?mode=sendpassword"><font size="2">Forgot your password</font></a>
    	
    </div>
    </form>
    
    </center>
    <div class="roundedbottoma">
    	<img src="img/rightbottomcornerlink3.jpg" alt=""
    	width="15" height="15" class="corner"
    	style="display: none" />
    </div>
    
    </div>
    I don't know why this isn't displaying properly. The code is nearly exact to my other rounded divs. It is displaying the corners, but their is like a few pixel edge going around the div. Not sure how to get rid of it.

    Thanks,
    Richard
    Need help with your tennis game visit the Chattennis.com tennis forums, tennis chat, and tennis articles.

  • #9
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    problem fixed.
    Need help with your tennis game visit the Chattennis.com tennis forums, tennis chat, and tennis articles.


  •  

    Posting Permissions

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