How to create circle photos & rounded corners with CSS

SillyGrrl.com // How to create circle photos & rounded corners with CSS
Adding lots of photos to your blog posts can be time consuming, so I’ve got an easy way to add rounded corners to your photos with CSS. You can also use this to style text boxes and items in your sidebar. Using CSS for graphic elements will not only cut down on the time it takes to create those items but will also help your site load faster. Win, win!

To create a colored box with rounded corners, add the border radius rule to the text box class in your stylesheet.

.lime {
background: #c1d615;
color: #fff;
padding: 5px 10px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;
}

Then paste the code below into the text/html view when creating a post or add it to a text/html gadget or widget.

<div class=”lime”><em>Candy canes jujubes gingerbread jelly beans brownie dessert. Sweet soufflé jelly tiramisu jelly beans. Danish faworki tart sweet tootsie roll lollipop chocolate bar. Pie lemon drops jelly gingerbread pie powder dragée wafer.</em></div>

 

Candy canes jujubes gingerbread jelly beans brownie dessert. Sweet soufflé jelly tiramisu jelly beans. Danish faworki tart sweet tootsie roll lollipop chocolate bar. Pie lemon drops jelly gingerbread pie powder dragée wafer.

 

You can also set all four corners separately – top left (35px), top right (2px), bottom right (10px), bottom left (20px). You’ll notice the larger the number, the more rounded the corners.

.lime2 {
background: #c1d615;
color: #fff;
padding: 5px 10px;
-moz-border-radius: 35px 2px 10px 20px;
border-radius: 35px 2px 10px 20px;
-webkit-border-radius: 35px 2px 10px 20px;
}

Candy canes jujubes gingerbread jelly beans brownie dessert. Sweet soufflé jelly tiramisu jelly beans. Danish faworki tart sweet tootsie roll lollipop chocolate bar. Pie lemon drops jelly gingerbread pie powder dragée wafer.

 

You can also remove the background and add a rounded border instead…

.lime-border {
background: transparent;
color: #c1d615;
padding: 5px 10px;
border: 2px dashed #c1d615;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
}

Candy canes jujubes gingerbread jelly beans brownie dessert. Sweet soufflé jelly tiramisu jelly beans. Danish faworki tart sweet tootsie roll lollipop chocolate bar. Pie lemon drops jelly gingerbread pie powder dragée wafer.

 

If you increase the radius you can use this rule to create buttons:

H
E
L
L
O

.lime-button {
float: left;
background: #c1d615;
color: #fff;
font-size: 28px;
text-align: center;
width: 55px;
height: 40px;
padding-top: 15px;
margin-right: 10px;
-moz-border-radius: 35px;
border-radius: 35px;
-webkit-border-radius: 35px;
}

L
O
V
E

#content .latest .lime-background {
float: left;
color: #c1d615;
font-size: 28px;
text-align: center;
width: 55px;
height: 40px;
padding-top: 15px;
margin-right: 10px;
-moz-border-radius: 35px;
border-radius: 35px;
-webkit-border-radius: 35px;
background: url(/tiny-chevron.gif) repeat;
border: 1px solid #ebebeb;
}

Float left causes the buttons to line up next to each other. I’ve also specified the height and width and added 15px of padding to push the text into the center. You’ll notice when you do this it makes the button longer, so I’ve subtracted the padding from the height of the button.

Lastly you can use this to create photos with rounded corners:

beach

<span class=”rounded-corners”><img src=”/beach.jpg” /></span>

.rounded-corners {
display: inline-block;
position: relative;
overflow: hidden;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-border-radius: 50px;
}

For the completely round photos at the top of this post make the radius high and include the width and height:

.round {
display: inline-block;
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
-webkit-border-radius: 300px;
}

Lastly, you could add the border radius to all of your photos:

img {
display: inline-block;
position: relative;
overflow: hidden;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-border-radius: 50px;
}

Now, if you’re reading this in an RSS reader you may be thinking, “Hey lady, I don’t see any rounded anything!” The reason for this is many feed readers strip the CSS from your content and use their own styles. You may be able to get around this by using a plugin like Feed Styler or you might just save this technique for your blog design and skip using it for posts.

black-line

green-arrowDon’t forget to enter the giveaway to win a copy of my ebook Nerd School: Clever Coding & Design Tips for Busy Bloggers and sign-up for my mailing list to get your hands on it early!

Related Posts Plugin for WordPress, Blogger...
dashed-line
dashed-line

Comments

  1. Monique says

    I’m definitely going to put this to use. I didn’t realize you are able to do this with CSS. Thanks for sharing!

  2. Jennifer M. says

    Very clever! I should really implement some of this. I love the idea of having a styled paragraph – that could be a really quick and easy way to call out blog series – and it would be so much quicker to do that with CSS than to make a new graphic for each time I want to make something cute like that! Thanks for the tip! ;)

  3. BEcky says

    Great tips!

    Just wondering if there is anyway to do this just with html in the post edit box in wordpress?
    Thanks and great blog so glad I stumbled upon it :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>