• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Highlight text in WordPress post with css rounded border effect

By Abhishek Ghosh April 18, 2011 6:12 pm Updated on April 18, 2011

Highlight text in WordPress post with css rounded border effect

Advertisement

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 .

Advertisement

---

 

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

 

Here is the CSS code:

 

Vim
1
2
3
4
5
6
background-color: #ff0000;
border: 2px solid #cdd6db;
font-color: #000000;
font-size: 12;
font-family: Arial,Tahoma,Verdana;
text-shadow: #fff 1px 1px;

 

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:

 

Vim
1
<span style="background-color: #e9eef3; border: 2px solid #CDD6DB; border-radius: 50px / 50px; font-color: #000000 font-size; font-family: Arial,Tahoma,Verdana; text-shadow: #fff 1px 1px;

 

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.

 

Signature

This Article Has Been Shared 910 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Highlight text in WordPress post with css rounded border effect

  • Customize the logo of your WordPress login page : second method

    Want to customize the logo of WordPress admin login page? This is possible by inserting a few lines of code in the functions.php file of your theme. Finally, a website that is more professional and close to your brand.

  • Pressed text effect with Photoshop and CSS

    Pressed text effect, becoming more and popular these days. You can create pressed text effect by two methods: graphically by using Adobe Photoshop or by using CSS codes.

  • How to get different theme for different category in WordPress

    You might want to use different theme for different category in your Wordpress blog, here is how you can apply so.

  • WordPress unordered Lists with custom alignment with CSS

    Wordpress unordered lists are aligned to the left with usage of a tiny bit of CSS and HTML it can aligned to the right side.

  • Creating a Scrollable Image Inside Post in WordPress : Easiest Way

    Creating a Scrollable Image for very long images Inside Post in WordPress is very easy if you follow our this method. No need of installing any plugin.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (22.1K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • How to Make the Most of Your S Pen (S22 Ultra) June 29, 2022
  • Safe Chargers for Samsung Galaxy S22 Ultra June 27, 2022
  • How Telecoms Can Use The Cloud To Power Their 5G Network June 24, 2022
  • A Beginner Guide to Cloud Computing for Development June 22, 2022
  • 5 Benefits of Using a Virtual Data Room Today June 19, 2022

About This Article

Cite this article as: Abhishek Ghosh, "Highlight text in WordPress post with css rounded border effect," in The Customize Windows, April 18, 2011, June 30, 2022, https://thecustomizewindows.com/2011/04/highlight-text-in-wordpress-post-with-css-rounded-border-effect/.

Source:The Customize Windows, JiMA.in

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Privacy Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2022 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy