Control which border position is set by corner pixels in CSS
You cannot do this with the usual CSS border options, but if you want, you can still have a pure CSS solution: Basically what you are going to do is create two pseudo-elements with CSS and cover the corners:
#foo {
border: 100px solid black;
border-right: 100px solid blue;
height:300px;
position:relative;
}
#foo:after, #foo:before{
content:'';
background:black;
width:100px;
height:100px;
display:block;
position:absolute;
}
#foo:after{
bottom:-100px;
right:-100px;
}
#foo:before{
top:-100px;
right:-100px;
}
It might be a little messy, but it works. Set the width and position of the width of the elements :after
and :before
the width of the border. And it gives this effect:
JSFiddle Demo
source to share
Hope my crappy photoshop skills explain the boundaries for you.
If you look at the 4 corners of the square, you will see little lines where one border begins and the next begins.
This will always be a problem: P
You can make it a background image (in a shitty way)
or you can use other divs to create borders (crappy as well)
source to share
The first solution will use a pseudo element that you put absolutely to cover the right border. To ensure full coverage of the border, you will have to compensate for the top, bottom, and right positions with a negative value for the border width. In this case, I used width 5px
to better illustrate with an example:
#foo {
background-color: #eee;
border: 5px solid grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
right: -5px; /* move by border width */
background-color: blue;
width: 5px;
}
<div id="foo"></div>
Alternatively, you can use CSS shadow:
#foo {
background-color: #eee;
box-shadow: inset 0 0 0 5px grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 5px;
background-color: blue;
}
<div id="foo"></div>
source to share
As others have pointed out, your problem is how the borders are drawn in CSS.
<div id="foo">Problem</div>
#foo {
border: 30px solid black;
border-right: 30px solid blue;
}
The easiest way to get around this is to use a pseudo-element . Since this workaround is totally value dependent border-width
, I'll show an example using the SCSS variable to make it clear where the width value is.
Note. You don't need SCSS to solve this problem, using a variable just helps readability / maintainability.
HTML:
<div id="foo"></div>
SCSS:
/* Set SCSS variable */
$border-width: 30px;
#foo {
border: $border-width solid black;
position: relative; /* anchor the absolute positioned ::after element */
}
#foo:after {
content: '';
background: blue;
width: $border-width;
height: 100%;
position: absolute;
right: -$border-width;
}
Demo: http://jsbin.com/cimaxe/6
Hope it's clear that wherever you see $border-width
you can replace it with a value like 30px
.
source to share