CSS3 Shapes in HTML5

Here i am going to discuss different types of CSS3 shapes which we can use in html page.

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 the 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.