4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

CSS Border (Horizontal Line) Problem

by shipwrecked
3 replies
  • WEB DESIGN
    • |
Hi,

I'm trying to create a CSS bottom-border for a DIV in order for it to serve as a horizontal underline under the title text.

Code:
.line{margin: auto; width: 600px; border-width:1px; border-style:solid; border-color:#CCCCCC; background-color: #FFFFFF;}
The problem is that I always get it 2px; thick. So it appears thicker. I did a screenshot copy-paste into a photo program and checked: it was exactly 2px thick.

I can create borders of any thickness, but can't get it down to 1px.

I appreciate the help.

I have 1px wide borders elsewhere on the site, just that this one doesn't want to work.

I can send you a PM with the page, it's an individual page, where I am testing it.
#border #css #horizontal #line #problem
  • Profile picture of the author Patrick
    You are trying to create a border in the bottom so it should be ...

    Code:
    border-bottom: 1px solid #CCCCCC;
    Signature
    Full Stack Developer | Shopify Developer | WordPress Developer | React Developer
    {{ DiscussionBoard.errors[7502110].message }}
  • Profile picture of the author shipwrecked
    Sorry, I had too, but didn't work... Now I see I didn't paste my original code...

    By the way I solved it: I made no border, just a 1 px high DIV and that acts as an underline for a title text.

    I think this will do
    {{ DiscussionBoard.errors[7502159].message }}
  • Profile picture of the author TheContentAuthority
    Shipwrecked,

    Another alternative you could use is the horizontal rule.

    <hr />
    Not the most efficient use of space but it does the trick for a line to delineate content.

    Best,

    Shawn
    Signature
    Outsource to the experts...

    We customize your Blog, eBook, Press Release and Sale Copy content with your message.

    {{ DiscussionBoard.errors[7503530].message }}

Trending Topics