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.

No correct solution

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top