CODEWITHSUNDEEP
htmlcss
m00t13
m00t13

Reputation: 65

How to make div right right border not take up full length and centered?

I want give a div 100px height a border-right that is 80px height and vertically centered(can both be in percentages as well). There is a similar post with a good answer here: Any way to limit border length? but it doesn't solve the problem of centering the border.

Upvotes: 0

Views: 104

Answers (2)

Abdul Rahman Mohsen
Abdul Rahman Mohsen

Reputation: 115

You can do so using this code for cross-browser compatibility:

<style>
    .box {
        position:relative; width:300px; height:100px; background-color:#eee;
    }
    .right_border {
        position:absolute; z-index:99; top:10%; right:0px; height:80%; width:2px; background-color:#900; overflow:hidden;
    }
</style>
<div class=box>
    <div class=right_border></div>
</div>

Upvotes: 1

Raevenk
Raevenk

Reputation: 246

Use a pseudo element: https://jsfiddle.net/Lecuw62a/

<div>
content
</div>

div {
  height: 100px;
  width: 100px;
  background: grey;
  position: relative;
}
div:before {
  content:  '';
  position: absolute;
  width: 4px;
  right: 0;
  height: 80%;
  background: black;
  top: 10%;
}

Upvotes: 2

Related Questions