Add a Bottom Border to a Div

Add a bottom border to a div

You have to specify the border-bottom-style also to the div

and your code becomes

.divLast 
{
   top: 0px;
   margin:0px;  
   padding: 0px 2px 2px 3px;    
   border-width: 2px;
   border-bottom-width:2px;
   border-bottom-color:White;
   border-bottom-style: solid;
   width: 100%;
}

or you can use a shorthand for the border-bottom like below

<style>
.divLast 
{
   top: 0px;
   margin:0px;  
   padding: 0px 2px 2px 3px;    
   border-width: 2px;
   border-bottom: 2px white solid;
   width: 100%;
}
</style>
<div class='divLast'>
   test element with white border bottom
</div>

This works fine for me

Css to create a bottom border that does not extend the length of the entire div

I do not think u can style a section of a div however you certainly can use a

---

tage to get the job done

 body {    margin: 100px;}    .my-styled-div {        text-align: center;        /*padding-bottom: 10px;  remove this*/        border-right: 1px solid #848484;        /*border-bottom: 1px solid #848484;  also remove this */    }
.hr-fix{    margin-bottom: 0;    margin-top: 10px;    margin-left: 25px;/*  << you can specify how far from the left you want the line to be */    border: 0;    border-bottom: 1px solid #848484; /* you may match this border with the right border of the <div>*/    }

<div class="row col-md-4">        <div class="my-styled-div">            div1            <hr class="hr-fix" />        </div>    </div>    <div class="row col-md-4">        <div class="my-styled-div">            div2             <hr class="hr-fix" />        </div>    </div>    <div class="row col-md-4">        <div class="my-styled-div">            div3            <hr class="hr-fix" />        </div>    </div>

How to border bottom the div content on click

Here is a changed Codesandbox

I added d-flex instead of form-inline and d-flex flex-column for each column div.
For the bottom line i added an auto margin with mt-auto.
To have a margin on the top i added mt-3 to the image.

There may be a better solution but it works.

Place border in a 100% height and width div - right and bottom border outside

By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

There's a CSS property called box-sizing which allows you to adjust this property. Adding box-sizing: border-box to .div-with-border should fix this for you!

Take a look at the link above. They have a live example that demonstrates box-sizing.

how set border-bottom only for any divs

article div:not(:last-of-type) {
  border-bottom: 1px solid #FFFFFF; /* or whatever you want */
}

Active tab border bottom under the div instead in the div

just set the margin-bttom: -3px; for the active class and its done :

.role-tab-active {
    margin-bottom:-3px;
    border-bottom: 3px #108DE7 solid;
    font-weight: bold;
}

see below snippet :

.tab-wrapper {    width: auto;    padding-left: 17px;    background-color: aqua;    white-space: nowrap;    display: table-cell; }
.content{        background-color: aqua;}
.role-tab {    cursor: pointer;    display: inline-block;    height: 50px;    overflow: hidden;    text-align: center;    text-overflow: ellipsis;    vertical-align: middle;    margin-right: 19px;    margin-bottom:-3px;}
    .role-tab > p {        display: table-cell;        height: 50px;        overflow: visible;        vertical-align: middle;        width: 100%;    }
.role-tab-active {    margin-bottom:-3px;    border-bottom: 3px #108DE7 solid;    font-weight: bold;}

<div class="tab-wrapper">    <div class="role-tab role-tab-active">        <p>Role tab 1</p>    </div>    <div class="role-tab">        <p>Role tab 2</p>    </div></div>
<div class="content"><p>Content</p></div>

Use HTML Div to add border only on top and bottom?

Just a case of:

<h3 style="background-color:red; padding:2% 0 2% 0; border-top:5px solid green; border-bottom: 5px solid green;">
This is a header
</h3>

Add offset to border-bottom in CSS

This can be done with a linear-gradient:

.box {  background:    linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,    lightcoral;  width: 500px;  height: 40px;}

<div class="box"></div>

How to create a child div stick to the bottom border of parent div with 50% inside the parent and 50% outside

You can change the height and the child div will stay in place. And the parental diva needs to be given a position: relative.

.parent {
  position: relative;
  background-color:black;
  width: 200px;
  height: 200px
}

.child {
  position: absolute;
    background-color: red;
    width: 50px;
    height: 50px;
    bottom: -25px;
    right: 75px;
}

<div class="parent">
  <div class="child">
  </div>
</div>

---

Related Topics