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

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

download source…

RoundedCorners.zip