Title: Rounded Image + aligned text possible?
Last modified: April 17, 2017

---

# Rounded Image + aligned text possible?

 *  [mosufe](https://wordpress.org/support/users/mosufe/)
 * (@mosufe)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/rounded-image-aligned-text-possible/)
 * Hi Everyone,
 * I’ve been messing around with some css to try and set the images on my Website
   a little nicer. I’ve stumbled across a tutorial that shows how to turn square
   and rectangular images into round images through use of a new class in CSS. It’s
   all working fine, the only problem is I wanted my text to follow the rounded 
   image contour. Is that possible? Any Suggestions? Thanks.
 * This is the tutorial I followed: [https://theme4press.com/create-rounded-images-wordpress/](https://theme4press.com/create-rounded-images-wordpress/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [9 years, 1 month ago](https://wordpress.org/support/topic/rounded-image-aligned-text-possible/#post-9038805)
 * Possible.
 * Here’s a site under development. The image on the right is “circled” via CSS 
   and the text more or less wraps to the circle.
 * [http://hab2.sterndata.com/](http://hab2.sterndata.com/)
 * Look at the last line of the CSS, below.
 *     ```
       .fi-circle img {
           float: right;
           border-radius: 50%;
           border-color: #fff;
           border-width: 6px;
           border-style: solid;
           margin-left: 1em;
           shape-outside: circle();
       }
       ```
   
 *  Thread Starter [mosufe](https://wordpress.org/support/users/mosufe/)
 * (@mosufe)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/rounded-image-aligned-text-possible/#post-9039305)
 * Perfect! That’s exactly what I was looking for Thanks 🙂
 *  [Nokaa](https://wordpress.org/support/users/nokaa/)
 * (@nokaa)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/rounded-image-aligned-text-possible/#post-9041388)
 * Hm, don’t really like the method using in this tutorial…
 * Better way to do it is to mix a div with 50% border-radius and the flex display.
   
   It’ll be easier to center your content inside the box.
 * If you don’t want to got a streched image, you can use a background-image on 
   the div and use the property of background-position (center) and background-size(
   cover).
 * Also, if you realy want to keep an image for a SEO reason, you can manage that
   effect by position it with the same properties in the div, and a full height 
   property (100%) and an auto width. And if you want to add text over it, just 
   add an absolute span.
 * Like this : [https://codepen.io/anon/pen/EmVRRZ](https://codepen.io/anon/pen/EmVRRZ)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Rounded Image + aligned text possible?’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 3 participants
 * Last reply from: [Nokaa](https://wordpress.org/support/users/nokaa/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/rounded-image-aligned-text-possible/#post-9041388)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics