Rounded Corner box or bubble

Round Corner bubble with pure CSS

Hello friends,I have seen many people(including me ;)) struggling to create a rounded corner box or bubble with an arrow, without using image, Here is the solution for that

CSS

.css-bubble {
position:relative;
padding:15px;
margin:1em 0 3em;
border:5px solid #ff0000;
color:#333;
background:#ff0000;

/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

/* creates the larger triangle */
.css-bubble:before {
content:"\00a0"; /* This is place a content floating value represents   */
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-40px; /* value = - border-top-width - border-bottom-width */
left:300px; /* controls horizontal position */
width:0;
height:0;
border:20px solid transparent;
border-top-color:#ff0000;
}

/* creates the smaller triangle */
.css-bubble:after {
content:"\00a0";
display:block;
position:absolute;
bottom:-26px;
left:300px; /* Used to control horizontal position this should be same as left value for :before class -- */
width:0;
height:0;
border:15px solid transparent;
border-top-color:#ff0000;
}

HTML


<div class="css-bubble">
Your Content Goes here
</div>



Output

Your Content Goes here

Please leave your comments