Boxes with Colored Borders and Text.

A Simple CSS Tutorial

 

I’m going to explain how to make an asymmetric bordered text box like this using CSS:

Hello! I’m a very stylish box

If you also want the inner text to include a link with a different style, you can check my blog post:
How to create a new style for links in WordPress

To start, in my CSS stylesheet style.css, I’ll create a new style called “box” and assign the basic properties:

.box { 
font-family: sans-serif; 
font-size: 18px; 
font-weight: 400; 
color: #ffffff; 
background:#ee0467 }

I’ve set the font type, size, weight, and color, as well as the background color of the box.

Now, in my HTML editor (in WordPress: the text editor of the page), I’m going to test the style I just created by using the conventional class attribute:

<div class="box">Hello! I’m a very stylish box</div>

Or the class attribute for paragraphs:

<p class="box">Hello! I’m a very stylish box</p>

And the result will be this:

Let’s continue adding properties to our text box. Remember that on this website you can find a good list of CSS properties.

To prevent the text from being “stuck” to the box edges, we add some breathing space using padding. You can give a general padding or break it down for better control. Here, I’ll set padding of 20px on all sides:

padding: 20px;

But if you want to break it down it would be like this:

padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

Or like this:

padding: 20px 20px 20px 20px;

Then we give margin to our box using the margin property:

margin: 0 0 25px;

Finally, we define the behavior of box elements when they don’t fit their container using the overflow property:

overflow: hidden;

In this case, anything outside the box will be hidden, but we can fix it by using the div tag for paragraphs. This way, nothing will overflow because the box will contain the entire paragraph.

Our code so far looks like this:

.box {
font-family: sans-serif;
font-size: 18px;
font-weight: 400;
color: #ffffff;
background: #889ccf;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}

Our resulting box so far looks like this:

Now I’m going to add the border-radius property so the box has rounded corners. To make it easy, I recommend using the tool CSSmatic which automatically generates border styles while previewing them. It also lets us set border thickness, color, and background.

I decided to give a 35px radius to the top-left and top-right corners to create asymmetric boxes. I also added a 2px border in a darker tone:

border-radius: 35px 0px 35px 0px;
-moz-border-radius: 35px 0px 35px 0px;
-webkit-border-radius: 35px 0px 35px 0px;
border: 2px solid #5878ca;

My box is almost ready:

Looking at the result, I’m going to change some properties and add some more to adjust the design.

I’ll make the text inside the box centered by default using text-align and change the font-family to a geometric sans-serif font, Century Gothic :

text-align: center;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;

With these last changes, I have the box I was looking for. In my WordPress HTML editor, I call my box using the div class tag:

<div class="box">Hello! I’m a very stylish box</div>

Now I can see the final result:

Hello! I’m a very stylish box

/*----------- BOX ----------- */
.box { 
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
color: #ffffff; 
font-size: 18px; 
font-weight: 400; 
text-align: center; 
background: #889ccf; 
margin: 0 0 25px; 
overflow: hidden; 
padding: 20px; 
border-radius: 35px 0px 35px 0px; 
-moz-border-radius: 35px 0px 35px 0px; 
-webkit-border-radius: 35px 0px 35px 0px; 
border: 2px solid #5878ca;
}

😉 Yeah!

If you liked the content, please comment, share, or see how we make our web pages.