Highlight text in WordPress post with css rounded border effect

This is actually the continuation of our previous article Highlight, add pressed effects to certain words in your WordPress blog. We advice you to read that article first to understand what is we are going to do.

In previous article, we made certain text highlighted but there was no border of the highlights. Today, we will do two things: we will add a border with specific color and size as per our wish, but this first thing will be rectangular looking that might not be suitable for your theme.

So in the second method; we will make it rounded bordered highlight .

 

Highlighting text with pressed text effect + background color + rectangular border

 

Here is the CSS code:

 

 

As we have explained in detail about the colored texts or digits (you can change as you like); we are increasing the post length. Only one foot note: border : 2px might not be suitable for you; so you can change it.

 

Highlighting text with pressed text effect + background color + rounded border

 

To get rounded border with CSS, you need this code:

 

 

As you can see, border-radius is the thing which is determining the effect; so you can go ahead and experiment with it.

Some one asked ago elsewhere that codes are not working just showing these peculiar garbage like codes. So, remember to switch to HTML Editor, then copy paste the code and then switch back to normal and you will see that code is poetry.

It might not work for one sub standard closed source browser, but will always work for Firefox, Opera, Safari, Chrome, Chromium etc good browsers.

 

This Article Has Been Shared 317 Times!

Facebook Twitter Pinterest