---
title: "Speech Bubble Shapes in CSS"  
description: "Speech Bubble Shapes in CSS"  
author: "Sumit Kesarwani"  
published: 2013-06-24  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1375/speech-bubble-shapes-in-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 3 minutes  

---

# Speech Bubble Shapes in CSS

\

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/3caf2851-d9e1-4f35-9b9c-07fdd0946f33.png)

```
#bubble-1{     background:red;     width:300px;     height:50px;     position:relative;     border-radius:10px;     -moz-border-radius:10px;     -webkit-border-radius:10px;     left:40px;}#bubble-1:after{     position:absolute;     content:"";     width:0;     height:0;     border-top:10px  solid  transparent;     border-bottom:10px  solid  transparent;     border-right:40px  solid  red;     right:100%;     top:20px;       }
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/73d768e7-daf1-47e3-9344-2554b07a6327.png)

```
#bubble-2{     background:red;     width:300px;     height:50px;     position:relative;     border-radius:10px;     -moz-boredr-radius:10px;     -webkit-border-radius:10px;}#bubble-2:after{     content:"";     position:absolute;     width:0;     height:0;     border-top:10px  solid  transparent;     border-bottom:10px  solid  transparent;     border-left:40px  solid  red;     left:100%;     top:20px;}
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/c55d931c-e480-4603-b5fd-7096e94ac95e.png)

```
#bubble-3{     width:300px;     height:50px;     background:red;     position:relative;     border-radius:10px;     -moz-boredr-radius:10px;     -webkit-border-radius:10px;}#bubble-3:after{     content:"";     position:absolute;     width:0;     height:0;     border-left:10px  solid  transparent;     border-right:10px  solid  transparent;     border-bottom:20px  solid  red;     left:80%;     top:-20px;}
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/d6f3af7c-ebf4-474a-a912-1d83d8421592.png)

```
#bubble-4{     width:300px;     height:50px;     background:red;     position:relative;     border-radius:10px;     -moz-boredr-radius:10px;     -webkit-border-radius:10px;}#bubble-4:after{     content:"";     position:absolute;     width:0;     height:0;     border-left:10px  solid  transparent;     border-right:10px  solid  transparent;     border-top:20px  solid  red;     right:80%;     top:50px;}
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/0316fc9f-8b59-4b43-90e5-eb5412a8f44e.png)

```
#bubble-5{     width:300px;     height:50px;     background:blue;     position:relative;     border-radius:10px;     -moz-boder-radius:10px;     -webkit-border-radius:10px;}#bubble-5:after{     content:"";     position:absolute;     width:0;     height:0;     border-top:20px  solid  blue;     border-right:20px  solid  transparent;     top:50px;     right:80%}
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/cde73dcd-7311-4bc6-abf8-1c77885abf1d.png)

```
#bubble-6{     width:300px;     height:50px;     background:blue;     position:relative;     border-radius:10px;     -moz-boder-radius:10px;     -webkit-border-radius:10px;}#bubble-6:after{     content:"";     position:absolute;     width:0;     height:0;     border-bottom:20px  solid  blue;     border-left:20px  solid  transparent;     top:-20px;     left:80%;} 
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/ad5f0a1c-7ec4-480a-84b9-eb0764530791.png)

```
#bubble-7{     width:300px;     height:50px;     background:blue;     position:relative;     border-radius:10px;     -moz-boder-radius:10px;     -webkit-border-radius:10px;}#bubble-7:after{     content:"";     position:absolute;     width:0;     height:0;     border-bottom:15px  solid  blue;     border-right:40px  solid  transparent;     left:100%;     top:10px;}
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/6c1242f1-e964-4910-8342-ea3563197406.png)

```
#bubble-8{     width:300px;     height:50px;     background:blue;     position:relative;     border-radius:10px;     -moz-boder-radius:10px;     -webkit-border-radius:10px;     left:60px;}#bubble-8:after{     content:"";     position:absolute;     width:0;     height:0;     border-bottom:15px  solid  blue;     border-left:40px  solid  transparent;     right:100%;     top:10px;} 
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/4fae4460-d6a9-4e26-8383-84935a96846c.png)

```
#bubble-9{     width:300px;     height:50px;     border:5px  solid  #5a8f00;     border-radius:10px ;     -moz-border-radius:10px;     -webkit-border-radius:10px;     position:relative;}#bubble-9:before{     content:"";     position:absolute;     bottom:-20px;  /* value = - border-top-width - border-bottom-width */     left:40px;  /* controls horizontal position */     border-width:20px  20px  0;     border-style:solid;     border-color:#5a8f00  transparent;     /* reduce the damage in FF3.0 */     display:block;      width:0;}#bubble-9:after{         content:"";         position:absolute;         bottom:-13px;  /* value = - border-top-width - border-bottom-width */         left:47px;  /* value = (:before left) + (:before border-left) - (:after border-left) */         border-width:13px  13px  0;         border-style:solid;         border-color:#fff  transparent;     /* reduce the damage in FF3.0 */     display:block;      width:0;}
```

![Speech Bubble Shapes in CSS](https://www.mindstick.com/mindstickarticle/d0051090-bafe-4dd9-8e29-cc1a95d34f61/images/c2d4c873-7cf8-4b9e-82cc-dda1c477445f.png)

```
#bubble-10{      width:300px;     height:50px;     border:5px  solid  #5a8f00;     border-radius:10px ;     -moz-border-radius:10px;     -webkit-border-radius:10px;     position:relative;}#bubble-10:before{     content:"";     position:absolute;     top:-20px;  /* value = - border-top-width - border-bottom-width */     bottom:auto;     left:auto;     right:40px;  /* controls horizontal position */     border-width:0  20px  20px;     border-style:solid;     border-color:#5a8f00  transparent;     display:block;      width:0;}#bubble-10:after{     content:"";     position:absolute;     top:-13px;  /* value = - border-top-width - border-bottom-width */     bottom:auto;     left:auto;     right:47px;  /* value = (:before right) + (:before border-right) - (:after border-right) */     border-width:0  13px  13px;     border-style:solid;     border-color:#fff  transparent;     display:block;      width:0;}
```

---

Original Source: https://www.mindstick.com/articles/1375/speech-bubble-shapes-in-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.