FORUMS: list search recent posts

Trouble with CSS + JS rounded DIV corners

COW Forums : Web Design (Wordpress, Joomla, etc.)

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Gerardo Morales
Trouble with CSS + JS rounded DIV corners
on Mar 23, 2010 at 8:30:34 pm

Hello forum,

I'm fairly new to Web Design and I'm having a lot of trouble trying to turn a Container DIV into a rounded container DIV. I would be very grateful if someone could help me understand what I'm doing wrong.

I'm using Javascript in conjuction with CSS to build the borders. It's a function I found online:

I was able to make it work using the original graphics, but when switching to the graphics I made it all fell apart. I'm guessing the trouble it's adjusting the specs of my own images somewhere, but this is where I get lost.

This is the sample page using my images for the function:

The original images where 1600x75 for the box and 24x8 for the borders. Mine are 1600x75 for the box and 53x24 for the borders.

The style that controls this function is:

.cbb {
margin-top: 0em;
margin-right: 0;
margin-bottom: 0em;
margin-left: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0px;
background-color: #EFECE6;
padding-right: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
.cbb h1 {
margin:0 -10px;
padding:0.3em 10px;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
/* Normal styling */
.cb {
width: 80%;
left: 100px;
top: 50px;
position: relative;
/* Top corners and border */
.bt {
margin:0 0 0 18px;
background:url(box.png) no-repeat 100% 0;
.bt div {
background:url(box.png) no-repeat 0 0;

/* Bottom corners and border */
.bb {
margin:0 0 0 12px;
background:url(box.png) no-repeat 100% 100%;
.bb div {
background:url(box.png) no-repeat 0 100%;

/* Left border */
.i1 {
padding:0 0 0 26px;
background:url(borders.png) repeat-y 0 0;
/* Right border */
.i2 {
padding:0 26px 0 0;
background:url(borders.png) repeat-y 100% 0;
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
padding:1px 10px;
/* Make the content wrapper auto clearing so it will contain floats (see */
.i3:after {
.i3 {display:inline-block;}
.i3 {display:block;}
/* Default CSS ends here */

Thank you,

Return to posts index

Jameson Wallace
Re: Trouble with CSS + JS rounded DIV corners
on Mar 24, 2010 at 6:43:09 am

use firebug to fix this. in the css console you can edit the styles and firefox updates the page immediately. keep adjusting numbers in the styles till it looks right.

usually this is a problem where some css properties want to be not the exact height or width of the image, but some proportion there of. there is no way, but just looking at the css to know which numbers need to be changed to what, unless you are the one that designed it in the first place.

unless you know exactly what to change, the only option is to try alternatives until it works.

does the script work when you resize your images to be the exact same size as the originals?

| Jameson Wallace
| Motion Graphics Festival
| New Motion + New Sound + New Code

Return to posts index

Alan Smith
Re: Trouble with CSS + JS rounded DIV corners
on Apr 12, 2010 at 8:45:16 pm

Check this out. It should help and shorten/reduce your code.

Alan Smith

Check out my blog -

Return to posts index

Gerardo Morales
Re: Trouble with CSS + JS rounded DIV corners
on Apr 12, 2010 at 10:45:28 pm

Thank you both. I guess I need to simplify my corner image and play with the position of the image.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved