SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Text Border

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Location
    Dallas, TX, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Border

    I need to place borders around text. All my books and references discuss borders around sections such as <div> and tables, but I cannot find the css logic for borders around text. Can someone help me out or point me in the right direction?

    Thanks!

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Example:

    CSS:
    Code:
    p span {
    border: 1px solid green;
    }
    HTML:
    Code:
    <p><span>Text Here</span></p>
    As you can see above, to draw a border around the actual text, it needs to be applied to an inline element (such as <strong>, <a>, or <span>...), or a block-level element (such as <div>, <p>, etc...) which is set to display: inline; through CSS.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Note that you will need to add position:relative otherwise ie won't draw the borders correctly .

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Location
    Dallas, TX, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies. But when I tried this, it put a block border around the entire selection. Instead of "border," I should probably use "outline." I am needing to outline each letter of a selection with the outline following the actual letter itself, not a block around the letter. I am hope I am more clear this time. Can this be done in CSS?

    Thanks for your help!

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    outline won't be of much help, as it outlines elements as well. There's a property: text-shadow, which would come pretty close, but unfortunately, only Safari supports it to date. An image would probably be more suitable for this effect you're going for anyway.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Location
    Dallas, TX, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Thanks. I appreciate your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •