Search code examples
htmlwordpressrounded-corners

Add rounded corner div in wordpress blog post

I was trying to create a blog like the one in link: http://www.wikihow.com/Grow-Flowers-from-Seed

which has separate sections for every step, with rounded corners, a different background-color and center aligned.

What I wrote so far in my wordpress is:

<div style="width: 90%; background-color: #eaeaea;">
     <a href="http://prelaunch.biocarve.com/blog/wp-content/uploads/2015/12/670px-Grow-Flowers-from-Seed-Step-1.jpg"><img class=" size-medium wp-image-258 aligncenter" src="http://prelaunch.biocarve.com/blog/wp-content/uploads/2015/12/670px-Grow-Flowers-from-Seed-Step-1-300x225.jpg" alt="Grow Flowers From Seeds step1" width="450" /></a>
    <div style="width: 5%; padding: 0 10pt 0 0; float: left; background-color: #eaeaea;">
        <b>1</b>
    </div>
    <div class="step" style="width: 95%; padding: 0 10pt 0 0; float: left; background-color: #eaeaea;">
        <b class="whb">Choose a container.</b> There are a variety of inexpensive options available. Germinating flats are cheap and specifically created for the purpose of germinating seeds. Plastic drinking cups and recycled egg cartons are other inexpensive options, however. Small flower pots will also work.
    </div>
</div>

Right now what I am getting looks like: enter image description here Please let me know where I am wrong, and how can I have the rounded corners as well.

Solution

  • Just add this class and pass that class to the giving <div> to mask the image a rounded corner 

    .roundedCorner{ 

  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;

}