Free Rounded Box Bubbles

Today we've got some rounded boxes, they're great for little off to the side notes, speech bubbles, tabs and buttons.

Check out CSS For Bloggers on how to impliment the bubble properly.

You can change the colors as you wish to match your blog just change the background and border color # codes.

Consult How to Align Images in Blog Posts Using Float | CSS For Bloggers: Part 4. to learn how to float these boxes to the left or the right and have text wrap around them, it's easier than you think!

How to Create Simple Box Content Using CSS | CSS For Bloggers: Part 3 for how to edit the size of the bubble and other parameters.

Rounded Bubble

roundedbubble. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

#roundedbubble {
width: 200px;
margin: 10px 10px 10px 112px;
padding: 30px 15px 10px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: #F8E147;
word-wrap: break-word;
}

Note Bubble

Notebubble. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

#notebubble {
width: 200px;
margin: 10px 10px 10px 112px;
padding: 10px 15px 10px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: #A6DADC;
word-wrap: break-word;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_c0hofzFmNNfXKn81BSalBlmEc8jIz0r7yAzpWilijgT5-XfCWGiVZtJCfx2wDpVmm5gWwdiyFCW-rDn3qVi-gpIjxlB9jtY6N08J05-cSFf4fSuNFwR4mZSQsskwkh8Phr9M53R9xA/');
background-repeat:no-repeat; }

Tip Bubble

Tipbubble. Make sandwiches for the rest of the week on a Sunday, so you're prepared you turkey.

#tipbubble {
width: 200px;
margin: 10px 10px 10px 112px;
padding: 10px 15px 10px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: #83FA92;
word-wrap: break-word;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiythlIAdjWzpIeqKsPm-RyLk5bepGF-_ieeS9P4f8zGndhcTQg8KKqQHyDdzeDIwzLTduzMRxsJIMTOqgcF7JOe5VH2GwcrKmMrbNrUkScb_yTJBQbcVQ8eWEakEs9u_YGR2nrMIEjp6Q/');
background-repeat:no-repeat; }