How Are These Buttons Rounded

[tomyknoker]

Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/

[Twey]

Because they're not done with CSS, they're single images.

[boogyman]

I am sorry to tell you this but there are no rounded corners. Your eyes are deceiving you. I have "web developer tools" for Firefox, and I have diabled all images and that entity stays the same...

[boogyman]

Because they're not done with CSS, they're single images.

They aren't images at all

[Twey]

Yes they are (http://www.haveamint.com/images/btn-login.png).

[boogyman]

he was asking about the "browse button" not the login

[tomyknoker]

I am sorry to tell you this but there are no rounded corners. Your eyes are deceiving you. I have "web developer tools" for Firefox, and I have diabled all images and that entity stays the same...The corners are definitely rounded... look at the attached

[boogyman]

look at that screen shot... it is not done through css or javascript

[tomyknoker]

Um those buttons have rounded corners I'm afraid...

[boogyman]

I agree it looks like they do have rounded corners, but I am telling you right now that it is not done thru css or javascript.

[Twey]

In that screenshot, at least, the corners are slightly rounded, but only through JPEG compression.

[tomyknoker]

Actually I think it is in the css... in the btn class...

[mburt]

Either way, rounded or not, it has to be done with somesort of CSS styling.

[boogyman]

This is some VERY creative use of borders.

Seperated (http://dividinglimits.com/test.html)

It is accomplished thru some negative margining. I am not entirely sure the specifics behind it all, but I am writing this site for WELL executed rounded corners

the first style creates the left top and left bottom "corners"
the second style creates the right top and right bottom "corners"

[mburt]

That's going to be some script...

[pcbrainbuster]

Well acutally I once found this site that had CUT parts of an image to make it change its style, it could be the same here... I'm going to llok for the site and if I find anything will report back...

[mburt]

I made a rounded corners script (no images) with JavaScript, but I'm on my laptop, away from the house. So I can't get it.

[pcbrainbuster]

http://www.cssplay.co.uk/boxes/snazzy.html -

I found a new site instead but am not sure ....

[boogyman]

That's going to be some script...

below is the contents of the css that creates the corners.



a.btn
{
float: left;
margin: -3px 0 0;
padding: 1px 0;
color: #E9F08F;
background-color: #2E2E2E;
border-left: 1px solid #C0C0C0;
border-right: 1px solid #C0C0C0;
vertical-align: middle;
}

a.btn span
{
color: #E9F08F;
position: relative;
display: block;
padding: 0 5px 1px;
border: 2px solid #2E2E2E;
margin: 0 -1px;
}


the actual corners are the borders, and its a combination of margin and padding that creates the rest of the effect

[techno_race]

There are NO rounded corners (as shown in the screenshot below).
943

They are NOT images:

<a href="/forum/pepper_development/" class="btn"><span>Browse</span></a>

[mburt]

Just a really cool submit button :).