CODEWITHSUNDEEP
htmlcssborder
zur4ik
zur4ik

Reputation: 6254

how to set CSS border-left outside of box

I have element with 3 borders: left (4px), top (1px) and bottom (1px):

enter image description here

But border-left looks like this:

enter image description here

how to set border-left outside of the box, to make render without cutting of edges?

This is Example of my code:

HTML:

<a class="element">Some Text</a>

CSS: 

.element {
    display: block;
    width: 200px;
    height: 40px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: 4px solid red;
}

Upvotes: 3

Views: 12958

Answers (4)

Insider
Insider

Reputation: 189

This should solve the problem:

-webkit-background-clip:padding;
-moz-background-clip:padding;
background-clip:padding-box;

Upvotes: 1

zur4ik
zur4ik

Reputation: 6254

Solved problem using :before pseudo element in CSS:

.element {
    display: block;
    width: 200px;
    height: 40px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    position: relative; /* Make sure you have this */
    padding-left: 8px; /* Nudge the text by few pixels in the box */
}

.element:before {
    content: "";
    background-color: red;
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

Upvotes: 9

codingrose
codingrose

Reputation: 15699

Add padding to the left side.

.element {
    padding-left:4px;
}

DEMO here.

Upvotes: -1

Sandesh
Sandesh

Reputation: 1222

Look at the simple example :

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

this may help you.

Upvotes: -1

Related Questions