A fairly basic CSS question

[TheShortStack]

Despite feeling comfortable with PHP and HTML, I've never really got to grips with CSS. Maybe that should be my New Years Resolution ...

In the meantime though, I'm hoping someone can help me what what (I reckon!) should be a fairly straight forward query.

I want to create a border for my content. Essentially a box with a grey border and two rounded corners at the top which will surround the main content on my page.

Can anyone help me out with the necessary CSS code please?

Thanks very much in advance!

[GregW]

Rounded corners is actually quite tricky with CSS because you cant simply tell a box to have rounded corners with one line of code. You have to go the long way around by using rounded images for each corner iirc.

I don't know how to make rounded corner boxes off the top of my head as I avoid them because they are trickier than they should be. Here's a link though: 25 Rounded Corners Techniques with CSS | CSS Juice

Unless you really want rounded corners for whatever reason, I would be tempted to just keep it simple with normal corners.

[TheShortStack]

Always going for the complicated stuff

Cheers for the reply Greg ... and for the link. I'll have a read through of it.

One thought has struck me though. If I designed a graphic with round corners to use as a header and then stuck it at the top of a square cornered box (to use as a header), would that look really terrible?

[GregW]

Yeah if you set it as a background image it should do what you want. The downside to that method though is the box won't be flexible in size and the image will be bigger than it needs to be, but it will certainly be more straightforward than using images for each corner.

[pokerworx]

Its actually pretty handy to do when you get the positioning right like you would put this in your css and you can have different ones for different pages if you have different images like below

h1.page1 {
background:url(image 1 goes here) no-repeat;
color: xxx;
font-size: xxpx;
font-weight: bold;
padding: 30px 0px 24px 92px;
}

h1.page2 {
background:url(image 2 goes here) no-repeat;
color: xxx;
font-size: xxpx;
font-weight: bold;
padding: 30px 0px 24px 92px;
}


The padding is what you use for positioning (top – bottom - left – right) mess around with it to get it to sit properly behind the headings

Then call it on you pages

<h1 class=" page1">xxxxx</h1>

<h1 class=" page2">xxxxx</h1>

You can use this for making rounded boxes, you can do borders and all I always use the bottom one.

RoundedCornr: Rounded Corner and Gradient Generator

And this is one of my favorite little tools, you have a colour picker, take pictures and check sizes with it.

Mirek's Free Windows Software