How can I add a border around text on a static page?

  • Author
  • #1001455


    How can I add a border around a piece of text on a static page? I want to draw attention to the text, but I don’t want to fill the background with color since I already used that for previous text on the same page. I anticipate that this can be done with CSS, but will this cause an issue with the previous CSS I put in to get a colored box? See – center column. I want to put a colored border around the Media Picks area. Thanks!
    Blog url:

    The blog I need help with is


    I would recommend editing the HTML of your post to include a class for the media picks. Then you can add CSS that will add a border any time you use that class.

    Here is an example of the HTML:
    <p class="callout">

    Here is the CSS you could add to your Appearance → Custom Design → CSS editor:

    .callout {
    border: 1px dotted red;
    padding: 1em;

    Here is more info about the HTML editor:


    I forgot to mention that you can change out the color code if you’d like, and you can also adjust the type of border from dotted to solid or make it bigger by changing the 1px value.



    Thank you for the CSS code! I can see that is works well for a single paragraph of text.

    I would like to use this same “box” idea to surround a paragraph of text that contains a bulleted list, or perhaps several paragraphs of text that are separated by a blank line. How do I do this?


    Try surrounding your full area you want outlined with a div class called callout. Just keep the exact same CSS supplied by designsimply and use this with your html instead of the “p” designation.

    <div class="callout">all your paragraphs, list, etc. here</div>



    Perfect! Did the trick just like I wanted. Thanks so much for this tip!


    Oh super. Designsimply did the heavy lifting, but I’m glad my little hint helped.

The topic ‘How can I add a border around text on a static page?’ is closed to new replies.