CSS3 Rounded Corners

One of the nice options in CSS3 is border-radius. It will allow you to create rounded corners for elements such as divs. This feature is supported in Mozilla/Firefox and Safari 3. IE users will still see the the border, it just won’t be rounded.

CSS3 Rounded Corners

The CSS

<style type="text/css">
  <!--
  #roundeddemo1 {
  background-color: #B00;
  /*Mozilla Based Browsers*/
  -moz-border-radius: 5px;
  /*Webkit Based Browsers*/
  -webkit-border-radius: 5px;
  border: 1px solid #B00;
  padding: 20px;
  color: #FFF;
  }
  -->
  </style>

The HTML

<div id="roundeddemo1">
Demo 1 - All Corners Rounded
</div>

CSS3 Partial Rounded Corners.

You can even take it a step further and specify specific corners to be rounded.

The CSS

<style type="text/css">
<!--
#roundeddemo2 {
	background-color: #B00;
	/*Mozilla Based Browsers*/
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 0px;
	/*Webkit Based Browsers*/
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 0px;
	border: 1px solid #B00;
	padding: 20px;
    color: #FFF;
-->
</style>

The HTML

<div id="roundeddemo2">
Demo 2 - Various Corners Rounded
</div>

CSS Code Block Formatting. Keeps Your Design Intact.

I am not sure who came up with this little nugget. I have seen it around a few times, but who ever you are, I love you…

If you ever have the need to share blocks via an HTML page (like this blog)  that others will copy and paste from, use the CSS style below. Your web visitors will appreciate it. Plus, it will also keep your design from exploding due to long lines of code.

pre {

white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

}