<div class="page large-header article light raleway pid_7572 page-7572">
<div class="background"> </div>
<article>
<header>
<div class="container">
<h1>
How to use HTML + CSS to create rounded edges on a photo
</h1>
<div class="summary">
</div>
<p class="byline"></p>
</div><!--container-->
</header>
<section>
<div class="container">
<p>Have you ever thought, "man, a photo with rounded edges would look really good on this page, but I don't know how to use Photoshop or Illustrator"? Well, my friend, I'm here to help! You can use HTML or CSS to take a photo from regular ol' square edges, to any type of rounded edge that tickles your fancy - *without* using a photo editor. So let's start with this photo of my dog Lady (wearing an octopus on her head).</p><p><img rel="" style="" class="aligncenter size-medium wp-image-6344" src="http://tiffdotcom.com/wp-content/uploads/2014/12/891489_323361251197125_383175881_n-300x300.jpg" alt="" height="300" width="300"></p><!--more--><p>Now let's say I want to use this photo for a testimonial, but I want to spruce it up a bit. I want the photo to have rounded edges!</p><p>All I have to do is harness the power of the <em>border-radius property</em>.</p><p>Find the < img > tag in your HTML/Text editor and add the following: <strong>style="border-radius: 15px;" rel="border-radius: 15px;" rel="border-radius: 15px;" rel="border-radius: 15px;"</strong>. Voila - you will get this:</p><p><img style="border-radius: 15px;" rel="border-radius: 15px;" class="aligncenter wp-image-6344 size-medium" src="http://tiffdotcom.com/wp-content/uploads/2014/12/891489_323361251197125_383175881_n-300x300.jpg" alt="Photo with rounded edges" height="300" width="300"></p><p>To be clear, the full tag for the image above is:</p><p class="content-box-gray"><img class="aligncenter wp-image-6344 size-medium" <strong>style="border-radius: 15px;"</strong> src="<img src="http://tiffdotcom.com/wp-content/uploads/2014/12/891489_323361251197125_383175881_n-300×300.jpg">" alt="Photo with rounded edges" width="300″ height="300″ /></p><p>Now, let's say I want the photo to be more circlular. Simple - I just need to increase the px for the border-radius.</p><p>The image below is using: <strong>style="border-radius: 150px;" rel="border-radius: 150px;" rel="border-radius: 150px;"</strong>:</p><p><img style="border-radius: 150px;" rel="border-radius: 150px;" class="aligncenter size-medium wp-image-6344" src="http://tiffdotcom.com/wp-content/uploads/2014/12/891489_323361251197125_383175881_n-300x300.jpg" alt="891489_323361251197125_383175881_n" height="300" width="300"></p><p>Now that we've come full circle (puns), what if we want to get a bit crazy with our border-radius? We can! We can have up to four px values to create varying levels of rounded edges. Here's how that breaks down:</p><p><strong>style="border-radius: 5px 6px 7px 8px;"</strong></p><p>5px is the top left corner.</p><p>6px is the top right.</p><p>7px is the lower right, and 8px is the lower left.</p><p>For the image below, I only used 2 px values: <strong>style="border-radius: 20px 65px;"</strong></p><p>The 20px represents the top left and lower right corners. The 65px is for the top right and lower left.</p><p><img style="border-radius: 20px 65px;" rel="border-radius: 20px 65px;" class="aligncenter size-medium wp-image-6344" src="http://tiffdotcom.com/wp-content/uploads/2014/12/891489_323361251197125_383175881_n-300x300.jpg" alt="891489_323361251197125_383175881_n" height="300" width="300"></p><h2>Using CSS Class</h2><p>Using border-radius for HTML is easy. Let's say, though, that you want to use the same circular shape for all testimonials on your site. While you could apply the same style tag to every photo, it would be easier to create a CSS class for this specific border-radius. For example, if I wanted all of my photos of Lady to be circular, this is the CSS class I would put in my site's stylesheet:</p><p class="content-box-gray">img.circle {
border-radius: 150px;
}</p><p>This means that any time there is an < img > tag, and I assign a <strong>class="circle"</strong>, the border-radius will be applied to that image. Example below:</p><p><img src="/uploads/55d92656a7ec7.png"></p><p>The code for each image:</p><p class="content-box-gray"><<strong>img class="circle</strong>" ... /></p>
</div><!--container-->
</section>
</article>
</div><!-- page-->