Rounded or sliced corners for Box Shapes in CSS

Question

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

Welcome to StackOverflow, but please remove your email address. SO members always post all answers so that everyone can benefit. — Michael La Voie, Jun 23 '09 at 19:27
Please check out this SO question: [what-is-the-best-way-to-create-rounded-corners-using-css](http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners-using-css) — Michael La Voie, Jun 23 '09 at 19:28

score 2 · Answer 1 · answered Jun 23 '09 at 20:57

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.

Rounded or sliced corners for Box Shapes in CSS

1 Answers1