Putting border around a paragraph in wordpress

by 14 comments
Hi Gang

If I have a paragraph in a wordpress blog, and I want to put a black thin borber around the whole paragraph (to show that it is a testimonial), can I do this and how would I do it???

Many thanks
Phil
#web design #border #paragraph #putting #wordpress
  • Profile picture of the author Titanphil
    Phil,
    I would create a cool block image using GIMP, Photoshop, or Paint.net, add the text inside of it, and then place that image inside your blog. This can be done in a few minutes.
  • Profile picture of the author aesoft
    Here's the basic styling for the border:
    Code:
    border: 1px solid #000000;
    Example with paragraph element:
    Code:
    <p style="border: 1px solid #000000;">Your Content</p>
    Or you can use it in a CSS file (if you use one) and assign it to a class.

    For example, in the CSS file you may have a class name of 'testimonial-style':
    Code:
    .testimonial-style { border: 1px solid #000000; }
    Then use the class for the paragraph element:
    Code:
    <p class="testimonial-style">Your Content</p>
    Hope this helps!
    • Profile picture of the author Lloyd Buchinski
      Originally Posted by aesoft View Post

      Here's the basic styling for the border:
      Code:
      border: 1px thin #000000;
      Example with paragraph element:
      Code:
      <p style="border: 1px thin #000000;">Your Content</p>
      Or you can use it in a CSS file (if you use one) and assign it to a class.

      For example, in the CSS file you may have a class name of 'testimonial-style':
      Code:
      .testimonial-style { border: 1px thin #000000; }
      Then use the class for the paragraph element:
      Code:
      <p class="testimonial-style">Your Content</p>
      Hope this helps!
      I've never used 'thin' in a css sheet but that just looks a bit funny. If you have '1px' you will get a 1px border which is as thin as it can get. Maybe thin would give you the same result, but I don't see the point to having both of them. Mine are usually something like 'border:solid 1px #ccc;' That results in a border a single pixel thick (or thin) in a neutral gray.

      Were you not aware of that, or is there something here that I don't understand? (we are all just learning, especially me)

      best wishes
    • Profile picture of the author Rinki
      Thanks.
      This worked, I could change the color of the border as well.

      I have a question related to inserting picture in wordpress post.
      I have set featured pciture for my post and the Resolution of featured picture is very good.
      But if I use same picture in my post, using add Media, and try to increase its size a bit. its resolution is coming very bad.

      I mean same picture used at both the places, but resolution is so diff in both. why?

      Thanks.
      Rinki


      Originally Posted by aesoft View Post

      Here's the basic styling for the border:
      Code:
      border: 1px solid #000000;
      Example with paragraph element:
      Code:
      <p style="border: 1px solid #000000;">Your Content</p>
      Or you can use it in a CSS file (if you use one) and assign it to a class.

      For example, in the CSS file you may have a class name of 'testimonial-style':
      Code:
      .testimonial-style { border: 1px solid #000000; }
      Then use the class for the paragraph element:
      Code:
      <p class="testimonial-style">Your Content</p>
      Hope this helps!
  • Profile picture of the author phil.wheatley
    Hey Guys

    Wow, awesome, that's two very different but practical ways of doing it. Thanks for your help!!

    Philbo
    • Profile picture of the author aesoft
      Originally Posted by phil.wheatley View Post

      Hey Guys

      Wow, awesome, that's two very different but practical ways of doing it. Thanks for your help!!

      Philbo
      My pleasure, glad it helped.
  • Profile picture of the author promo_guy
    Another thing to consider is adding some padding. Just adding a 1px border could mean it's butted up against the text, depending on if the paragraph already has padding.

    So, it might look like:

    .class-name {border:1px solid #000; padding: 5px;}

    or you could add a border to just one side, such as boder-left, border-right, border-top, etc.

    As aesoft says, CSS is relatively simple (though powerful and I love it! lol) and there are some really cool things you can do, especially if you combine with jquery/javascript.

    Anyway, good stuff guys
  • Profile picture of the author RobbieLima
    The main two answer you were got which is really helpful because i have also tried it for the checking. it is really useful.

Next Topics on Trending Feed