How to bevel the corner of a block div?

by

Until CSS4 border-corner-shape property is in danger! and it’s not implemented, This can be done by using CSS3 transforms (to keep border property free for further usage):

HTML:

<div class="box">
  Text Content
</div>

CSS:

.box {
  width: 200px; 
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;  
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

Here is JSBin Demo.

NOTE: There’s another div in example above has class attribute of box2, which implemented without using CSS3 declarations that you might consider using it 😉

More Related Contents:

  1. I want to get this CSS shape and have a background puicture inside it
  2. How to make double border on left only with thick outside and thin inside [duplicate]
  3. Responsive grid of hexagons
  4. Curve bottom side of the div to the inside with CSS
  5. Can I create a div with a Curved bottom?
  6. How to make this arrow in CSS only?
  7. CSS Progress Circle
  8. How to use CSS to surround a number with a circle?
  9. Elongated hexagon shaped button using only one element
  10. Circular percent progress bar
  11. How to create a curve between two gradient using CSS?
  12. How does this CSS produce a circle?
  13. Easier way to create circle div than using an image?
  14. HTML5 / CSS3 Circle with Partial Border
  15. How to draw a trapezium/trapezoid with css3?
  16. Create a slanted edge to a div [duplicate]
  17. How to create a transparent triangle with border using CSS?
  18. Draw Circle using css alone [duplicate]
  19. How to add border to a container with transparent gaps in between
  20. CSS box shadow around a custom shape?
  21. How to create a curved speech bubble?
  22. How can I create a wavy shape CSS?
  23. How to Make A Chevron Arrow Using CSS?
  24. Title with bottom border smaller than width
  25. CSS Zigzag Border with a Textured Background
  26. How do I create a teardrop in HTML?
  27. Square DIV where height is equal to viewport
  28. How to create a heart shape using CSS?
  29. Make plus symbol in CSS
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment