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>

0 Responses