ROUND CORNER BOXES WITH CSS

adris72 · Joined: 01 Jan 1970 Posts: 1

I saw some people asking this question (how to do this) so I thought I would post a mini-tutrorial on round corners.

Note: you can make this with the two areas: vertical and horizontal (one or both) but not with single articles. You can make different colors for each area if you want.

Source: http://kalsey.com/2003/07/rounded_corners_in_css/

First, you have to upload to your website the 4 corners that you will find in the above page. (Change the color in a graphic program and don't forget to take note of the color in hexadecimal format, you'll use that color for the background). In this example the color of the box is #f90 (or #ff9900)

I uploaded the 4 images to components/com_magazine/layouts/images/bg/ if you upload them to a different folder don't forget to change the image path in both css and html template files.

Now, just copy and paste the css code in the style that you are using. (Don't forget to change the color unless you want to use that exact orange, also you can change the color of the font, this example uses white)

BRAINS · Joined: 01 Jan 1970 Posts: 4

Works great.

I wanted to extend this (or simplify it!) and just wanted to have a single rounded corner over the top right on the title bars.

It works OK in IE but not in Firefox.

Anyone any ideas on this:

.general_heading,.heading{
background: url(/images/bg/tr.gif) no-repeat top right #000066;
display: block;
height: 23px;
line-height: 23px;
text-indent: 8px;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
}

The CSS is probably all wrong somewhere!

m1gu3 · Joined: 01 Jan 1970 Posts: 1

it only shows the round corners on the left side, already checked the code Im no expert buy dont see anything wrong what might be happening?

can somebody help me with that maybe posting your layout or css style? I dont know i just want to get my articles wrapped in a round corner box Laughing

maybe like this one can somebody help me with this http://www.ijoomla.net/news/

thanks in advance for the help.

Recent Usability Tests

Shopping Cart

Satisfaction Guarantee

Get it FREE!

Member Login