How to Make Bottom Infobox Corners Round (v2.2)

[broadstreetbully]

I needed to make the bottom corners of my infoboxes round and didn't want to go through the hassle of making separate images for the bottom corners...

this edit will give your infoboxes and "new products for [month]" perfectly-aligned and rounded corners that look great....

you can also make the top corners of the infoboxes round as well if need-be...

 

go into catalog/stylesheet.css

around line #100 you will see:

 

.infoBox {
background: #00aeef;
}

 

right under the

background: #00aeef;

before the "}" simply add the following code:

border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
border: 1px solid #00AEEF;

 

that's it!

 

to edit the "roundness" of the corners you edit the

0px 0px 5px 5px; 

 

the first 2 "0px 0px" are at zero to keep the top corners square with the header of the infobox...you can edit the numbers to make them round if you want to...

 

the second 2 "5px 5px; " will make the bottom corners more or less round...lower numbers are less round and higher numbers are more round...these numbers should be the same to keep both corners equally round...

 

the

border: 1px solid #00AEEF;

is the thickness and color of the infobox border...

 

to change the thickness of the border change the "1px" number in "border: 1px solid" and to change the color of the border to match your infoboxes & website just edit the "#00aeef" in the last line

border: 1px solid #00AEEF;

 

this edit will also make the "new products for..." corners rounded to match your infoboxes... (as well as any addon like "Star Product", etc. and the box enclosing the "reviews" & "buy" buttons on your product info page)...

 

You can also make the border look different by changing the "solid" in "border: 1px solid" to any of the following:

solid

dashed

dotted

double

groove

inset

outset

ridge