Best Method to add Rounded Corners to a Div

[FishSword]

Hiya,

 

I have a div contained inside a another div. What's the best way to center the parent div horizontally and vertically, and add images of rounded corners to all 4 corners.

 

Please see attached an image of what I'm trying to create.

 

Cheers

 

[attachment deleted by admin]

[Anti-Moronic]

My solution would have been:

 

<div class="outerdiv">
  <div class="innerdiv"></div>
</div>

<style>
.outerdiv{
  float:left;
  width:150px;
  height:40px;
  background: green;
  border:solid 3px orange;
}

.innerdiv{
  height:36px;
  border:solid 2px white;
  
}

.outerdiv, .innerdiv{
  border-radius: 6px;-moz-border-radius: 6px;
}

</style>

 

Which actually produces quite a strange effect. Sorry, css isn't my strongpoint. It's almost there, but not quite.

[jdavidbakr]

If you can live without IE showing the rounded corners, use the border-radius directive.  Even IE9 will obey that.

 

To do rounded corners with images, I've done this:

 

CSS:

div.roundbox {
     background-color: white;
     padding: 5px 10px;
     margin: 0 20px;
}
div.roundbox_wrapper {
	     padding: 0px 5px;
	     clear: both;
}
div.roundbox_top,
div.roundbox_bottom {
	    height: 20px;
}
div.roundbox_top_left,
div.roundbox_top_right,
div.roundbox_bottom_left,
div.roundbox_bottom_right {
	      float: left;
	      height: 20px;
	      width: 20px;
	      background: url('../images/styles/boxes/rounded_corners.png');
}
div.roundbox_top_right {
	       background-position: 20px 0;
}
div.roundbox_bottom_left {
	       background-position: 0 20px;
}
div.roundbox_bottom_right {
	       background-position: 20px 20px;
}
div.roundbox_top_center,
div.roundbox_bottom_center {
		   background-color: #c6c6c6;
		   float: left;
		   height: 20px;
}
div.roundbox_center {
	    background-color: #c6c6c6;
}

 

(rounded_corners.png is a 40x40 pixel circle with color #c6c6c6, so breaking it up into 4 quadrants makes the 4 corners)

 

then my box looks like this:

 

<div class="roundbox">
  <div class="roundbox_wrapper">
    <div class="roundbox_top">
      <div class="roundbox_top_left"></div>
      <div class='roundbox_top_center"></div>
      <div class="roundbox_top_right"></div>
    </div>
    <div class="roundbox_center">
       <!-- Content will go here -->
    </div>
    <div class="roundbox_bottom">
      <div class='roundbox_bottom_left"></div>
      <div class="roundbox_bottom_center"></div>
      <div class="roundbox_bottom_right"></div>
    </div>
  </div>
</div>

 

I have two wrapper classes (roundbox and roundbox_wrapper) because I actually use javascript to do all this inserting (so in my html I just use "<div class="roundbox">...</div>" and JS wraps it all nicely for me as seen above)

[haku]

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

[President Obama]

The way I do it is well:

 

Image you have a box. Thats your container, then inside that box you have 9 separate boxes each individual divs. You fill your middle box with a colour, then place the corners in the corner boxes. Now what you do for the side is get a 1 pixel width bit and repeat it with the background-repeat along the axis you want. Bit hard to explain, could easily do it with pictures.

[SuperBlue]

When using images as borders, the best technique is my border technique, found at http://brugbart.com/Examples/Bordertechnique.html

 

This technique allows images to be used on a fully fluid box, something the other techniques that I've seen doesn't allow without using scripting.

 

But for for simple borders, CSS radius would be the best option, i wouldn't even say that its bad that some browsers don't display the borders properly, as long as the page doesn't get to ugly for my taste as a result.

 

Consider that some corner images, likely isn't much larger then 100-1000bytes, i actually got corner files that are no larger then around 150 bytes. Well the size of the border-radius.htc file is a good 4kb. Its still practically nothing i know, but preferring to use these tedious workarounds, is quite simply a bad-practice from the past.