CODEWITHSUNDEEP
htmlcss
USER_8675309
USER_8675309

Reputation: 893

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

I have a set of containers that have a bottom border that is styled like this:

<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>
<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>
<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>

with css styling (in addition to bootstrap) like this:

.my-styled-div {
    text-align: center;
    padding-bottom: 10px;
    border-right: 1px solid #848484;
    border-bottom: 1px solid #848484;
}

The thing I don't know how to do is prevent that bottom border from extending to the edge of the div. What can i use to have the bottom border start, for example, 25px in from the left side of each div?

Here is a fiddle link with a bit of a visual: https://jsfiddle.net/jfakey/mhwb49bu/1/

Upvotes: 8

Views: 14453

Answers (4)

danieljkahn
danieljkahn

Reputation: 183

Instead of putting the bottom border on the div, put it in a pseudo element, which you can adjust the width relative to the div. Example below uses a background-color and height of 1px on the pseudo-element to act as the bottom border.

.my-styled-div {
        position: relative;
        text-align: center;
        padding-bottom: 10px;
        border-right: 1px solid #848484;
        width: 80px;
        height: 80px;
    }
    .my-styled-div::after {
        content: '';
        position: absolute;
        margin: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 1px;
        background-color: #000;
    }

updated fiddle https://jsfiddle.net/to7Lgx8d/

Upvotes: 8

GrooveDOC
GrooveDOC

Reputation: 46

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>

Upvotes: 3

user0474975
user0474975

Reputation: 149

I think wrapping or styling another nested div is the only way to do this (unless you use a background image or a styled HR). This is because of the way CSS is designed to be used - aka the Box Model: https://css-tricks.com/the-css-box-model/

https://jsfiddle.net/mhwb49bu/12/

.my-styled-div {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #848484;
    margin-left: 25px;
    padding-left: 25px;
}
.row { 
    border-right: 1px solid silver;
    border-left: 1px solid silver;
}

Upvotes: 0

APAD1
APAD1

Reputation: 13666

One way to do it would be to fake a border with an additional div (or you could use a pseudo selector, as @danieljkahn details below, if you don't want to alter your HTML). You could then use calc to set the width of the div to 100% - 25px and then float it right:

.border {
    width:calc(100% - 25px);
    height:1px;
    background:#848484;
    float:right;
}

Updated Fiddle

Upvotes: 3

Related Questions