Globex Designs

CSS Borders - Rounded Corners

It's fairly easy to do rounded corners in Firefox 2.0+, just use the -moz-border-radius attribute like so:

1. Create a 'div', give it a background so we can see what's going on and a border of several pixels, then apply the -moz-border-radius attribute and you should see the following (provided you're using Firefox, or Gecko-powered browser):

Code: <style> #Box { background: #333; border: 5px solid #666; height: 100px; -moz-border-radius: 10px; width: 100px; } </style> <div id="Box"></div>

Preview:

2. But all you'll see in other browsers is:

<style>
#Box {
	background: #333;
	border: 5px solid #666;
	height: 100px;
	-moz-border-radius: 10px;
	width: 100px;
}
</style>

<div id="Box"></div>

3. There are two solutions, both very ugly, so our recomendation is to keep your borders squared off and give your Firefox users the priviledge of seeing the rounded. Of course you'll need to make sure your design works in both situations. But for those of you who wish to have rounded borders in other browsers, here is the solution that doesn't involve using images:

<style>

#Box2 {
	width: 100px;
}

.TopRounds div,
.BottomRounds div {
	background: #333;
	height: 1px;
	overflow: hidden;
}

.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

.Content {
	background: #333;
	height: 100px;
	width: 100px;
}

</style>

<div id="Box">
<div class="TopRounds">
  <div class="r1"></div>
  <div class="r2"></div>
  <div class="r3"></div>
  <div class="r4"></div>
</div>
<div class="Content"></div>
<div class="BottomRounds">
  <div class="r4"></div>
  <div class="r3"></div>
  <div class="r2"></div>
  <div class="r1"></div>
</div>
</div>

4. A major down side is that you can't set the border to a different color than the background. But this still works great for making simple rounded containers.

Back to Resources