Customers SupportDocumentation




Reply
 
Thread Tools
  #1  
Old 31-07-2007, 07:29 PM
vBulletin Skin Zone Staff
 
Join Date: May 2007
Posts: 1,811
How to create rounded corner boxes with borders

This tutorial gives you the resources to create your very own boxes with rounded corners and borders.

This method involves creating a container and nesting div tags to layer images in the corner. You are free to modify the images and css to create different colour boxes.

The HTML

Code:
<div class="rounded_box">
   <div class="rounded_top"><div></div></div>
      <div class="rounded_content">
         <p>Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim 
         veniam, quis nostrud exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa 
         qui officia deserunt mollit anim id est laborum.</p>
      </div>
   <div class="rounded_bottom"><div></div></div>
</div>

The CSS

Code:
.rounded_box {
 background: url(rounded_tl.png) no-repeat top left;
}
.rounded_top {
 background: url(rounded_tr.png) no-repeat top right;
}
.rounded_bottom {
 background: url(rounded_bl.png) no-repeat bottom left;
}
.rounded_bottom div {
 background: url(rounded_br.png) no-repeat bottom right;
}
.rounded_content {
 background: url(rounded_r.png) top right repeat-y;
}
.rounded_top div,.rounded_top,
.rounded_bottom div, .rounded_bottom {
 width: 100%;
 height: 15px;
 font-size: 1px;
}
.rounded_content, .rounded_bottom {
 margin-top: -19px;
}
.rounded_content { padding: 0 15px; }
Be sure to add the url to the images on your server

The Images

How to create rounded corner boxes with borders-rounded_bl.png

Name:  rounded_r.png
Views: 2612
Size:  72 Bytes

Name:  rounded_br.png
Views: 2961
Size:  283 Bytes

How to create rounded corner boxes with borders-rounded_tl.png

Name:  rounded_tr.png
Views: 2979
Size:  317 Bytes

The Result

Name:  rounded corner.gif
Views: 2862
Size:  20.3 KB

If you don't have a graphic editing program to change the colours of these simply request the following and I'll make them for you:

Background Colour: #??????
Box Colour: #??????
Border Colour: #??????
Border thickness: ?px
Reply With Quote
  #2  
Old 29-08-2007, 04:01 PM
Member
 
Real Name: Norman
Join Date: Aug 2007
Location: [Italy]
Posts: 5
Re: How to create rounded corner boxes with borders

Nice. Thank you, MaestroX.
Reply With Quote
  #3  
Old 09-05-2008, 03:21 PM
Member
 
Join Date: May 2008
Posts: 1
Re: How to create rounded corner boxes with borders

Sorry, I'm new to vB.

I'm not sure this is what I want... what I'm trying to do is have rounded border around the nav area and posts etc like this board does.

Any help is appreciated!

Last edited by vandelay; 09-05-2008 at 03:43 PM.
Reply With Quote
  #4  
Old 10-05-2008, 10:56 PM
DDL DDL is offline
Member
 
Join Date: Oct 2007
Posts: 40
Re: How to create rounded corner boxes with borders

You'd need to edit your template and do something similar to what MaestroX posted in this thread. As an alternative, I believe all of the skins here on vB Skin Zone have rounded corners/boxes.
Reply With Quote
  #5  
Old 17-05-2010, 11:54 AM
ush ush is offline
Member
 
Join Date: May 2010
Posts: 1
Re: How to create rounded corner boxes with borders

Background Colour: #0F5B96
Box Colour: #0F5B96
Border Colour: #ffffff
Border thickness: 2px
Reply With Quote
  #6  
Old 03-12-2010, 04:43 AM
Member
 
Join Date: Dec 2010
Posts: 5
Re: How to create rounded corner boxes with borders

There's not really a way to do this by just redefining the input tag - you still need to suround your input with some extra DIVs.
Reply With Quote
Reply

Tags
coding tutorials , vbulletin articles , vbulletin tutorials

Thread Tools


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to create rounded corner boxes admin vBulletin Articles & Tutorials 0 31-07-2007 07:14 PM


All times are GMT. The time now is 02:52 PM.