CSS3 Shapes in HTML5

You can use these shapes in any html control like text area , buttons , grids

SQUARE

#square {

width: 140px;
height: 140px;
background: blue;
}

CIRCLE

#circle {

width: 140px;
height: 140px;
background: blue;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}

OVAL


 #oval {

width: 200px;
height: 100px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}


you can use the oval shape in text area .

ROUNDED CORNER


#rc

{
border:display:solid;
border-radius: 5px;
border-width:1px;
}

you can use this in text area .

SPEECH BLUE


#speech-bubble {

width: 120px;
height: 80px;
background: blue;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid blue;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}


you can use speech blue to show messages if text boxes are left blank or any other message.