Rounded corners CSS

CSS3 is cool. However, CSS3 has some constraints today. For simplicity it would be prudent to use graphics for rounded corners.

Vertically expandable rounded corners CSS

Prefer the inner/outer system to piggybacking other elements.

Simple, stabile, cross-browser, no IE issues, no hacks. Corners can be transparent. Unsuitable when the height can grow enormously - how tall background image is tall enough..?

Top/outer background image is that taller one, bottom/inner is shorter.

Sample

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Markup

<div class="outer">
	<div class="inner">
		<h4></h4>
		<p></p>
	</div>
</div>

CSS

.outer{
	background:url(vertical-top-tall.png) center top no-repeat;
	float:left;
	margin-bottom:50px;/*compensates the margin-bottom:-50px; in .inner, it can be more if some margin is needed below that box*/
	width:202px;
}
.inner{
	background:url(vertical-bottom-short.png) center bottom no-repeat;
	float:left;
	margin-bottom:-50px;/*to adjust upper edge of bottom bg*/
	padding:0;/*optional, to position the elements inside, may be whatever*/
	position:relative;/*needed for ie6*/
	width:202px;
}

Vertically expandable rounded corners HTML, top-mid-bottom

Three divs plus a wrapping one, and the box can grow infinitely tall, no limits.

Word of caution - keep the class name and background image name different, otherwise MAC Safari can fail showing backgrounds.

Sample of rounded corners HTML

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

Markup for rounded corners HTML

<div class="myBox">
	<div class="myBoxTop">
		&#160;
	</div>
	<div class="myBoxMiddle">
		<p>
			Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
		</p>
	</div>
	<div class="myBoxBottom">
		&#160;
	</div>
</div>

CSS for rounded corners HTML

.myBox{
	float:left;
	width:170px;
}
.myBoxTop{
	background:url("bg-myBoxTop.png") left top no-repeat;
	float:left;
	height:30px;
	line-height:30px;/*IE6*/
	width:100%;
}
.myBoxMiddle{
	background:url("bg-myBoxMiddle.png") left top repeat-y;
	float:left;
	padding:1.5em 6% 0 4%;
	text-align:center;
	width:90%;
}
.myBoxBottom{
	background:url("bg-myBoxBottom.png") left top no-repeat;
	float:left;
	height:30px;
	line-height:30px;/*IE6*/
	width:100%;
}

Horizontally expandable rounded corners CSS

Fluid horisontally one bg image. If to adjust more lines inside, play around with line-height and bottom/top paddings.

Sample

inner, outer

Markup

<div class="flexiBar-outer">
	<div class="flexiBar-inner">
		inner, outer
	</div>
</div>

CSS

.flexiBar-outer{
	background:url(horisontal-background.gif) right center no-repeat;
	float:left;
	height:25px;
	padding-right:10px;
	width:auto;
}
.flexiBar-inner{
	background:url(horisontal-background.gif) left center no-repeat;
	float:left;/*keeps content from stretching page-wide under IE6 and IE7*/
	line-height:25px;/*height of the construction*/
	/*margin-left:-10px;
	on some occasions when one end of the background gets hidden you may like to play with this,
	has to cover the background's side curve*/
	padding-left:10px;/*side padding, if neg margin used has to compensate this as well*/
	position:relative;/*FireFox*/
	white-space:nowrap;/*keeps a single line thing from breaking in to more lines*/
	width:auto;/*float requires a width, and auto as this thing is fluid*/
}

2009, 2010.

Web Development - XHTML CSS JavaScript jQuery.

www.tuljo.com