How to make a curved edge hexagon by using CSS

Tags: html,css,css3,css-shapes

Problem :

This is my CSS.


#hexagon-circle { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative;
    border-radius: 10px;} 
#hexagon-circle:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 29px solid red;
    border-radius: 10px;} 
#hexagon-circle:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 29px solid red;
    border-radius: 10px;}

The output is 4 edges of hexagon is curved, but top and the bottom is not. I want to make all edge of hexagon curved. How to make top and bottom edge to be curved? or How to make the top edge of triangle to be curved?

Solution :

I think you are looking for this.


.hex {
  position: relative;
  margin: 1em auto;
  width: 10em; height: 17.32em;
  border-radius: 1em/.5em;
  background: orange;
  transition: opacity .5s;
.hex:before, .hex:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
.hex:before {
   -webkit-transform: rotate(60deg);
   -ms-transform: rotate(60deg);/*Added for IE9*/
   transform: rotate(60deg);
.hex:after {
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);/*Added for IE9*/
  transform: rotate(-60deg);


An please search a bit next time before asking a question. No offence :)

    CSS Howto..

    How do I align columns in thead and tbody when tbody css display attribute is block

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    How combine multiple media destinations (screen, print) with width restriction?

    How to extend jQuery.css from plugin

    How to make a HTML spinner with CSS

    How to fixed the form fields alignment issues using css and bootstrap

    How to remove a css class using jquery in a certain screen size

    How to select the first paragraph in a div with a specific class (CSS 2)

    How to get maximum compatibility with most of the devices for a Mobile Website?

    HTTPS and how to reference files and images

    How can i align these div containers

    CSS: How to change class style if another style is hover

    How to fixed image on every screen resolution?

    How to move a table(or other content) next to vertical navigation bar

    How can I remove the underline of a linked image in Firefox and Chrome?

    How to horizontally center align this absolutely positioned `` tag inside the relatively positioned div?

    how to add equal empty spaces between images

    HTML CSS how to adapt text on a Div's size [closed]

    How to add elements to an specified position without influence of other elements?

    HTML/CSS How to have to tags on same line?

    Animate css depending on mouse movement [how can I improve]

    CSS How to make image fluid extending only to one side of browser, aligned with centered content?

    How to reduce amount of space between lines of text

    How to change background [closed]

    How do I keep text from wrapping under an element which floats to its left?

    Rotation of a div gives a black background on IE, how can I remove it?

    How to change transparency of background image using javascript?

    How to override the width property in css [closed]

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    section to be trigger of show/hide content by click html/css only