How to make a rounded corner hexagon by using CSS

Question

This is my CSS:

#hexagon { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative;
    border-radius: 10px;
    top: 30px;
} 

#hexagon: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: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;
}

<div id="hexagon"></div>

The output is that 4 corners of the hexagon are rounded, but the top and the bottom are not. I want to make all corners of the hexagon rounded. How can I make top and bottom corners rounded? Or how can I make the top corner of a triangle rounded?

the approach you are using to make the hexagon won't allow you to make curved top and bottom. Are you able to use Css transform properties for your project? — web-tiki
– web-tiki, Commented Jul 18, 2014 at 7:53

Lee Taylor · Accepted Answer · 2022-07-12 11:51:35Z

22

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);
  transform: rotate(60deg);
}

.hex:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

<div class="hex"></div>

edited Jul 12, 2022 at 11:51

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Jul 18, 2014 at 7:53

Alex Char

33.2k9 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Albzi Over a year ago

That's the weirdest hexagon I've ever seen.

Sebastian vom Meer Over a year ago

Thats what I meant. In Firefox it seems to be okay.

Temani Afif · Accepted Answer · 2025-04-16 07:46:35Z

12

I will consider the same trick I used in the previous answer Where I will build the hexagon using clip-path

.hex {
  display: inline-grid;
  width: 200px;
  aspect-ratio: 1/cos(30deg);
}

.hex::before {
  content: "";
  background: orange;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

<div class="hex"></div>

Then I will apply an SVG filter:

.hex {
  width: 200px;
  display: inline-grid;
  color: orange;
  aspect-ratio: 1/cos(30deg);
  filter: url('#goo');
}

.hex::before {
  content: "";
  background:currentColor;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

And in the opposite direction

.hex {
  width: 200px;
  display: inline-grid;
  aspect-ratio: cos(30deg);
  margin: 0 5px;
  color: orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  background: currentColor;
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}

<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

See also: https://css-shape.com/hexagon/ where I am sharing more codes related to hexagon shapes

edited Apr 16 at 7:46

answered Dec 30, 2020 at 8:36

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

3 Comments

Mr. Jo Over a year ago

This helped me by another topic! Thanks a lot Temani.

Fabian Over a year ago

This helped me a lot! Also this answers the question on how to make squircicles in the web. Unfortunately, it does not work in the newest Safari.

Akin Zeman Over a year ago

great, can you implement border for this?

jbutler483 · Accepted Answer · 2015-04-10 11:20:13Z

I understand this is a fairly old question, but I thought I'd add an answer to show more about how it works.

So, first off, we need to create a single element on the page. I have gone for a size of height:300px; width:180px; and a border radius of 10px. Just because I like the roundness of the number (forgive the pun). Giving this element a position:relative; means that we can herein position everything absolutely in relative terms to this div.

We then need to create two pseudo elements, with the same height and width as the parent.

Because the pseudo elements are exactly that, pseudo elements, we need to add a content: to them. And since because we can put stuff within the parent, we don't really need these, so set them to "";

this leads us onto how to create the hexagon, rather than the rectangle we currently have. To do that, we're going to have to include a rotation in order to generate the other sides of the hexagon. With there being 6 sides, and the angles needing to add to 360, we can rotate one of the pseudo element by 60 degrees. The other we'll rotate by -60 degrees (or 300degrees, if you'd prefer).

This leaves us with our 'hexagon' in which we can add some nice styling and hover animations as need be:

.roundHex {
  position: relative;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  height: 300px;
  width: 180px;
  transition: all 1s;
  line-height:300px;
  text-align:center;
  color:white;
  font-size:20px;
}
.roundHex:before,
.roundHex:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  z-index:-1;
}
.roundHex:before {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
  transition: all 1s 0.5s;
}
.roundHex:after {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  transform: rotate(-60deg);
  transition: all 1s 1s;
}
.roundHex:hover {
  background: tomato;
}

<div class="roundHex">HOVER ME</div>

Jsfiddle demo also available

Bindiya Patoliya · Accepted Answer · 2014-07-18 08:00:43Z

1

Try this way :(works in chrome and in ie 10)

<br><br><br>
<div id="hexagon-circle"></div>
<style>
 #hexagon-circle {
    position: relative;
    margin: 1em auto;
    width: 10em; height: 17.32em;
    border-radius: 1em/.5em;
    opacity: .25;
    background: orange;
    transition: opacity .5s;
    cursor: pointer;
 }
 #hexagon-circle:before, #hexagon-circle:after {
    position: absolute;
    width: inherit; height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
  }
  #hexagon-circle:before {
   transform: rotate(60deg);
   -ms-transform:rotate(60deg); /* IE 9 */
   -webkit-transform:rotate(60deg); /* Opera, Chrome, and Safari */
  }
  #hexagon-circle:after {
    transform: rotate(-60deg);
    -ms-transform:rotate(-60deg); /* IE 9 */
    -webkit-transform:rotate(-60deg); /* Opera, Chrome, and Safari */
  }

  </style>

answered Jul 18, 2014 at 8:00

Bindiya Patoliya

2,7821 gold badge18 silver badges16 bronze badges

1 Comment

Bindiya Patoliya Over a year ago

Its my pleasure @sooko1005

Community · Accepted Answer · 2020-06-20 09:12:55Z

With your current code, using the triangle top and bottom, you can modify them slightly to give it a curved look. Add a width of 4px to #hexagon-circle:before and #hexagon-circle:after and reduce border-left and border-right by 2px each.

Js Fiddle here

#hexagon-circle { 
  width: 100px; 
  height: 55px; 
  background: red; 
  position: relative;
  border-radius: 10px;
}

#hexagon-circle:before { 
  content: ""; 
  position: absolute; 
  top: -25px; 
  left: 0; 
  width: 4px; 
  height: 0; 
  border-left: 48px solid transparent; 
  border-right: 48px solid transparent; 
  border-bottom: 29px solid red;
  border-radius: 10px;
}

#hexagon-circle:after { 
  content: ""; 
  position: absolute; 
  bottom: -25px; 
  left: 0; 
  width: 4px; 
  height: 0; 
  border-left: 48px solid transparent; 
  border-right: 48px solid transparent; 
  border-top: 29px solid red;
  border-radius: 10px;
}

It's not a true curve as it creates a straight line, however it gives the impression it might be curved when viewed in the context of the shape.

Alessandro Incarnati · Accepted Answer · 2014-07-18 08:26:58Z

0

You can try this approach:

CSS

#hexagon-circle { 
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: red;
transition: opacity .5s;
cursor: pointer;} 

#hexagon-circle:before { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(60deg);  /* IE 9 */
transform: rotate(60deg);} /* Firefox 16+, IE 10+, Opera */

#hexagon-circle:after { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(-60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(-60deg);  /* IE 9 */
transform: rotate(-60deg);} /* Firefox 16+, IE 10+, Opera */

DEMO

http://jsfiddle.net/yR7zt/4/

edited Jul 18, 2014 at 8:26

answered Jul 18, 2014 at 8:02

Alessandro Incarnati

7,2523 gold badges41 silver badges57 bronze badges

4 Comments

Kheema Pandey Over a year ago

why you guys not using standard approach (CSS3 properties) made by W3C.. Everyone is using vendor prefix -webkit for chrome. or you don't have any concern for other browsers. I just saw in FF30 and shocked it was not working then I noticed only prefix used for Chrome.. It would be a good practice to use the standard property and make a note to add a vendor prefix for other browser.

Alessandro Incarnati Over a year ago

Yes I agree... though 'shocked' seems exaggerated. Remember that this is not a site where we solve and deliver ready to deploy code for a client. Sometimes in our fiddles we explain how to approach a problem and then it's up to the user to fix these details after testing. Obviously I know about prefixes but in this case I just quickly edit his fiddle to show him a possible solution.

Kheema Pandey Over a year ago

but at first sight when I saw your Demo its doesn't work. Please use the standard approach. In addition to saving time you could simply add a one line text please add vendor prefix for cross browser solution

Alessandro Incarnati Over a year ago

Ok I have edited the answer. Now it's cross-browser. :)

Collectives™ on Stack Overflow

How to make a rounded corner hexagon by using CSS

6 Answers 6

2 Comments

3 Comments

Comments

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related