CODEWITHSUNDEEP
csshtmlborder
user12074577
user12074577

Reputation: 1411

Extend length of border css

How do I expand the length of a border past the length of my text? This is what I have so far:

    color: #8C4600;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid #D1D1D1;

This is the HTML: <li class = "vendors">VENDORS</li>

Upvotes: 26

Views: 98198

Answers (6)

Expo01
Expo01

Reputation: 1

I was trying to find the answer to this too, hopefully I'm answering the intended question...Using a list (li) as an example...

li{
    border-style:solid;
    width:200px; /* this allows extension of border past text */
}

If you want, you could also align the text differently with stuff like

    text-align: center;

Upvotes: 0

Victor Timi
Victor Timi

Reputation: 433

Just expand your border to the vw instead of its parent element.

Here is what I mean:

.vendors {
  width: 100vw;
  border-bottom: 1px solid hsla(0, 0%, 0%, 1);
}
<li class="vendors">VENDORS</li>

Upvotes: 0

user1467267
user1467267

Reputation: 

   .inner {
        width: 80%;
    }
    
    .outer {
        border-bottom: 1px solid #D1D1D1;
        color: #8C4600;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 15px;
    }
<div class="outer">
  <p class="inner">Your text</p>
</div>

You will probably need to set the outer width though. As it might not auto-scale correctly in each browser. Or just make outer 120%, and inner a fixed width. This should be possible in multiple approaches.

Upvotes: 0

Ali
Ali

Reputation: 104

You have to specify "border: ##px color; in css.

This will create a border around the related html tag.

A sample code is:

<!DOCTYPE html>
  <html>
   <head>
    <style>
     p {
       width:225px;
       border-style:solid;
       border:2px solid red;
     }
    </style>
  </head>
<body>
  <p>This is some text in a paragraph.</p>
</body>

By default, without the width and border-style, the border will occupy 100% of the space. You can restrict its width and style in any way you want.

Here's a link To a website that will help you the most.

Upvotes: -2

ASGM
ASGM

Reputation: 11381

CSS borders are placed between the margins and padding of an HTML element. If you want the borders of an HTML element to extend past the width (or height) of that element, you can add CSS padding to the element in order to push the borders outward.

For example, if your html is <li class=vendors">VENDORS</li> adding padding:0 10px; to your CSS would push the borders outwards on the right and left by 10px.

Upvotes: 17

Jeremy Carlson
Jeremy Carlson

Reputation: 1263

Use padding and negative margins.

E.g.:

div {
  padding: 1em;
  margin: 0 -1em;
  border-bottom: 1px solid red;
}

The above gives padding on all sides, and negative 1em margin on left and right. You may wish to fiddle w/ that.

Upvotes: 27

Related Questions