23 July 2007

Rounded Corners for Fixed width (css only)

Designers love them, and sometimes they really do make things look allot better… everyone is coming up with ways to have rounded corners that have extra markup in code (or inserted via javascript), or not widely supported css properties. If people would realize that a majority of the time you really have fixed widths… you can use the code you already have to get the same effect…

I don’t have anything really against the plethora of methods out there … but plain and simple … if you have a fixed width rounded box you DO NOT NEED ALL THAT FANCINESS

View examples »

IMHO: Extra markup via JavaScript is just as bad as inserting it by hand, but sometimes you do need it … so lesser of two evils is to use JavaScript…

dbulli

There are so many ways to make rounded corners. Most either use extra markup, JavaScript to produce extra markup, or not widely supported new CSS properties.

If you are using fixed widths, then you really don’t need all that JUNK!

dbulli

da html

<blockquote class="ex1">
	<p class="first-ele">...</p>
	<p class="last-ele">...</p>
</blockquote>

da css

.ex1 {
	width: 335px;
	background-color: #CF852C;
}
.ex1 p.first-ele {
	background: 
		transparent url(q-ex1-t.gif) 
		no-repeat 
		top left;
}
.ex1 p.last-ele {
	padding: 25px 0 0 70px;
	background: transparent 
		url(q-ex1-b.gif) 
		no-repeat 
		bottom left;
}

da images

example 1: top
example 1: top image

example 1: bottom
example 1: bottom image

example 2: top
example 2: top image

example 2: bottom
example 2: bottom image

da simple explanation

apply the fixed width to container
apply backround color to container
first element apply top graphic as background
last element apply bottom graphic as background
go and have a drink..

download source…

RoundedCorners.zip

« Older Newer »

comment

what they said	who said it
Well, sure, but your method also involves extra markup. The advantage of Javascript or CSS3 is that I make a change once it works its magic without having extra generated HTML (in the database, anyway). The inner-element/background-gif method is the classic way of doing it, but it’s going the way of the dodo because I think CSS3 and Javascript are preferred.	2007-07-24 Heliologue
I do believe css3 is the way to go, but that’s not widely supported yet. javascript is neat but the ones i see put a bunch of empty spans or b’s … which i don’t believe is the correct way to do things. semantically i think that is incorrect .. sure html is semantic correct to begin with, but javascript injects extra stuff. this isn’t my method per se … but you really don’t need extra markup or javascript fanciness with fixed widths. this method could be improved by putting background on container and use “:first-child” to not have extra markup (although i don’t believe classes qualify as extra markup)…	2007-07-24 DannyB
This is basically what I did for my own site, but the issue I ran into was that I had a border around my rounded edges box, so I needed a rounded border. As in this one, I applied an image (with the border included) to the top and bottom, and then created the div box with the border applied. The problem this created was the different ways Firefox and IE handled borders, and this gave me alignment issues, so I had to use 2 different CSS files with the widths a few pixels different to make it align in both browsers (though I later ran across a fix for the border alignment issue).	2007-10-09 Russell U.
This is a cool method. I don’t see why people worry so much about “extra markup.” Sure, let’s write half a page of javascript to avoid a few “div” tags… I mean, how long does it really take your browser to load a few “div” tags? Writing code is like driving in New Jersey – everyone has a better way to get where you want to go…	2008-08-18 jim
Nice tuturial, simple to use and code is short	2008-11-13 Allbest

what they said

who said it

Well, sure, but your method also involves extra markup. The advantage of Javascript or CSS3 is that I make a change once it works its magic without having extra generated HTML (in the database, anyway).

The inner-element/background-gif method is the classic way of doing it, but it’s going the way of the dodo because I think CSS3 and Javascript are preferred.

2007-07-24
Heliologue

I do believe css3 is the way to go, but that’s not widely supported yet. javascript is neat but the ones i see put a bunch of empty spans or b’s … which i don’t believe is the correct way to do things. semantically i think that is incorrect .. sure html is semantic correct to begin with, but javascript injects extra stuff.

this isn’t my method per se … but you really don’t need extra markup or javascript fanciness with fixed widths. this method could be improved by putting background on container and use “:first-child” to not have extra markup (although i don’t believe classes qualify as extra markup)…

2007-07-24
DannyB

This is basically what I did for my own site, but the issue I ran into was that I had a border around my rounded edges box, so I needed a rounded border. As in this one, I applied an image (with the border included) to the top and bottom, and then created the div box with the border applied. The problem this created was the different ways Firefox and IE handled borders, and this gave me alignment issues, so I had to use 2 different CSS files with the widths a few pixels different to make it align in both browsers (though I later ran across a fix for the border alignment issue).

2007-10-09
Russell U.

This is a cool method. I don’t see why people worry so much about “extra markup.” Sure, let’s write half a page of javascript to avoid a few “div” tags… I mean, how long does it really take your browser to load a few “div” tags? Writing code is like driving in New Jersey – everyone has a better way to get where you want to go…

2008-08-18
jim

Nice tuturial, simple to use and code is short

2008-11-13
Allbest

diversions :::

45+ Amazing Insect Shots in Photography

Insects are one of the most fascinating creatures on earth. There are more than 800, 000 species of insects in the world.

Grayscale color | Stroep Blog

This is how I create a grayscale color in actionscript 3.

Google Flash API

This is great ... google has made this easy ... stay tuned to see what i am working on ...

25 Free Mac Apps That Will Boost Your Productivity

There are many applications that can help you work faster and efficiently. Though, not many applications come cheap.

you still want more »