CSS3 Shapes in HTML5

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

SQUARE

  1. #square {
  2. width: 140px;
  3. height: 140px;
  4. background: blue;
  5. }

CIRCLE

  1. #circle {
  2. width: 140px;
  3. height: 140px;
  4. background: blue;
  5. -moz-border-radius: 70px;
  6. -webkit-border-radius: 70px;
  7. border-radius: 70px;
  8. }

OVAL

  1. #oval {
  2. width: 200px;
  3. height: 100px;
  4. -moz-border-radius: 100px / 50px;
  5. -webkit-border-radius: 100px / 50px;
  6. border-radius: 100px / 50px;
  7. }
s
you can use the oval shape in text area .

ROUNDED CORNER

  1. #rc
  2. {
  3. border:display:solid;
  4. border-radius: 5px;
  5. border-width:1px;
  6. }
a
you can use this in the text area.

SPEECH BLUE

  1. #speech-bubble {
  2. width: 120px;
  3. height: 80px;
  4. background: blue;
  5. position: absolute;
  6. -moz-border-radius: 10px;
  7. -webkit-border-radius: 10px;
  8. border-radius: 10px;
  9. }
  10. #speech-bubble:before {
  11. content:"";
  12. position: absolute;
  13. width: 0;
  14. height: 0;
  15. border-top: 13px solid transparent;
  16. border-right: 26px solid blue;
  17. border-bottom: 13px solid transparent;
  18. margin: 13px 0 0 -25px;
  19. }
d
you can use speech blue to show messages if text boxes are left blank or any other message.