CSS Box Shapes

Question

Is it possible to have rounded corners or sliced corners for a box using CSS? If yes, please let me know the way.

Thanks.

Answer 1

Please check out this SO question: what-is-the-best-way-to-create-rounded-corners-using-css

Answer 2

It's possible to have rounded corners:

.element {-webkit-border-radius: 1em; /* applies to all four corners */
          -webkit-border-top-left-radius: 1em; /* applies to only the identified (top left) corner) */
          -webkit-border-top-right-radius: 1em;
          -webkit-border-bottom-left-radius: 1em;
          -webkit-border-bottom-right-radius: 1em;

          -moz-border-radius: 1em; /* applies to all four corners */
          -moz-border-radius-topleft: 1em; /* applies only to identified (top left) corner */
          -moz-border-radius-bottomright: 1em /* and so on... */

          border-radius: 1em; /* CSS 3 only */
          border-top-right-radius: 1em; /* Applies to only identified (top right) corner */
}

I refer you to: http://www.the-art-of-web.com/css/border-radius/

Slashed corners, I think, would be doable only by using images.

Answer 3

This aritcle will tell you how to use rounded corners using css. It will work in all the browser including ie6!. check it out...

Nifty rounded corners