How to set a border on center of edge? (not outside or inside)

Question

I want something like this: (suppose the height of border is the same with div, I painted it longer just for clarification)

As you know, border is outside of div by default, also I can change it to inside of div. But now my question is about make it center of div (edge). How can I do that?

Edit: Also how can I set border upper (upon) div? Something like this:

m4n0 · Accepted Answer · 2015-11-12T06:42:50.513

3

You can also create that layout using pseudo elements. Usage of % values will make the pseudo-element grow and shrink with the parent.

The CSS box model is meant to have border around the content. There is no way you can hack the standard box model to show content after the border starting point.

Pseudo element behind the div:

.box {
  width: 150px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}
.box::before {
  background: #5E5E5E;
  content: " ";
  display: block;
  height: 120%;
  left: -5%;
  position: absolute;
  top: -10%;
  width: 10%;
  z-index: -1; /* Place it behind the box */
}

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

Placing pseudo element on top of the div:

.box {
  width: 150px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}
.box::before {
  background: #5E5E5E;
  content: " ";
  display: block;
  height: 90%;
  left: -5%;
  position: absolute;
  top: 5%;
  width: 10%;
}

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

edited Nov 12 '15 at 06:42

answered Nov 12 '15 at 06:26

m4n0

29,823
27
76
89

1

Wow, why didn't I think of that? I just used a regular element. This makes for one less line of HTML. Nice! – Jonathan Lam Nov 12 '15 at 06:28
1

I also like your use of percentages. Dynamic-y! – Jonathan Lam Nov 12 '15 at 06:29
Very good, can you tell me how can I show pseudo element on div? (Unlike the pictures that I have shown as sample) – Shafizadeh Nov 12 '15 at 06:30
Thanks @Jonathan :) Sajad, Sorry but I don't understand your question. I have already used the pseudo element on div in my example. – m4n0 Nov 12 '15 at 06:31
It's simple. You just need to remove the negative `z-index` and adjust the length values. – m4n0 Nov 12 '15 at 06:43
Sorry for asking again, look, always I have problem with `::after` and `::before`, can you please tell me why you used of `::before` in this case? *(and when should I use `::after`)* ? – Shafizadeh Nov 12 '15 at 06:50
1

There is not much of a difference. The same solution can be achieved using `:after` Basically CSS provides two fake elements for you to work. `::after` will be placed after the content but within the element while `::before` will be placed before the content. Check this image: https://cdn.css-tricks.com/wp-content/uploads/2011/06/multiplecanvases.jpg Add some content within the box and open your Chrome devtools and check the `:before` and `:after` pseudo element position with respect to the content inside. – m4n0 Nov 12 '15 at 06:59

score 2 · Answer 2 · answered Nov 12 '15 at 06:27

I think the only way to do this would be to create a second element and place it behind the first. AFAIK, there's no way to create a border that just goes past the edge.

HTML

<div id="content">
    <div id="border"></div>
</div>

CSS

div#content {
    width: 200px;
    height: 200px;
    margin-left: 40px;
    margin-top: 40px;
    background-color: blue;
    position: relative;
}
div#border {
    position: relative;
    left: -20px;
    top: -20px;
    height: 240px;
    width: 40px;
    background-color: green;
    z-index: -1;
}

See working example on JSFiddle.

How to set a border on center of edge? (not outside or inside)

2 Answers2