Designing a Simple Testimonial Box with CSS

As you may have seen many of them before in different types and shapes, testimonial boxes may contain the following details: Usually about one or two paragraphs of text, a name of the person who provided the testimonial, sometimes the website address of that person and a small portrait. I will use some of them in this example but you can include whatever info you want in your testimonial box.

Now, let's start with creating and styling the testimonial box.

Step 1: Size of the Testimonial Box

Testimonial boxes are usually narrower than the content area, hence I will add left and right margins to the box using the following CSS code.

.testimonial-box {
margin: 0 100px;
}

You need to put the above CSS code into your style file.

I named my testimonial box as testimonial-box and defined it as a class element, since there might be more than one testimonial box on the same page. You can change the right and left margin values (100px) to any value you want so that it will better suit your layout. Do not define a height for the box since some testimonials may be long and some others may be short, needing more vertical space. But if you want to have a certain height regardless of the amount of text, you can use the height property.

Step 2: Background of the Testimonial Box

You should have a different background, color or image, in a testimonial box so that it will stand out of the page and grab the attention of the reader. I will use color to style the background of the box using the following CSS code.

.testimonial-box {
margin: 0 80px;
background: #cccdfd;
}

Make sure the background color matches your current design and it is easy to read the text within the box.

Step 3: Border of the Testimonial Box

Since this is a box, we will add a border to make it easily distinguishable from the surrounding content. Here is the code that I used to add the border:

.testimonial-box {
margin: 0 80px;
background: #cccdfd;
border: 2px solid #02021e;
}

You can have rounded corners if you like by adding a border-radius property like the following:

.testimonial-box {
margin: 0 80px;
background: #cccdfd;
border: 2px solid #02021e;
border-radius: 10px;
}

Try changing the border radius value (10px) and see how it looks good for you.

Step 4: Text of the Testimonial Box

Now, we will add some padding inside the box so that there will be some space between the text and the box border, we will also specify the font of the text using the following code:

.testimonial-box {
margin: 0 80px;
padding: 10px;
font-family: "Courier New";
background: #cccdfd;
border: 2px solid #02021e;
}

Once you put the above CSS code into your style file, insert the following code into your page, where you want the testimonial box to appear.

<div class="testimonial-box">This is a sample testimonial box.</div>

You can see what we have up to now, below:

This is a sample testimonial box.

Step 5: Adding a Small Portrait

I will add a small photo to the upper left corner of the testimonial box using the following code:

.testimonial-box {
margin: 0 80px;
padding: 10px;
font-family: "Courier New";
background: #cccdfd;
border: 2px solid #02021e;
}
.testimonial-box img {
float: left;
margin-right: 10px;
}

<div class="testimonial-box">
<img src="/image.jpg" alt="Portrait">
<p>This is a sample testimonial box. You can use a testimonial to better explain your services or products and how people are finding them useful.</p>
<p><b>Name Here</b></p>
</div>

And below is our testimonial box in its final shape:

This tutorial gives you some basics for creating a testimonial box with CSS. You are free to play with the size, border, colors and font as you wish to design your own unique testimonial box.

f t g+ in