Add offset to border-bottom in CSS
but I want to give an offset to this 2px solid black border to be 5px above from where it is. Is it possible?
2 Answers 2
This can be done with a linear-gradient:
You can also do it like this:
Another idea with box shadow:
it’s a very sophisticated solution, not just an offset because I need to to a gradient in order to just offset the border. I’d like just to give an offset to the border, something I didn’t find googling it.
@felipe a border is a border, if you want to offset it inside the content then it’s no more a border and you need to use something else 😉 I will provide other ways if you want
Solution
Use CSS ::after to add a pseudo element that has the border you are looking for. Then move the pseudo element around to position it how you like. This pseudo element will always be tied to its root element but you still have to take into account modifying it for @media query changes and such.
You see in the image below that this solution is layering the pseudo element over the root one. You can choose to use ::before or experiment with other positioning setups to accommodate your layout needs.
Always do plenty of cross browser testing when doing edge case things like this because its possible you will run into box model issues.
HTML
CSS
How to create border offset?
Hi I was wondering how I can offset a border from a div, like the image: So the gray border is the same size as the image, only it is offset to the right corner. This is my markup:
3 Answers 3
It’s very simple with pseudo elements.
Worth noting that most browsers don’t support :before and :after pseudo-classes directly on the img element. In this case, a wrapper div (or other element) is needed to accomplish the effect, as reflected in this answer.
You can do this with :before or :after pseudo class
figure < margin-top: 20px; display: inline-block; >.image < position: relative; >figcaption < text-align: center; >.image:before
This can be accomplished with a box-shadow as well.
Note, this effect is only usable if the page background is a solid color, as the white fill is creating the effect by masking the gray shadow. If the body background was an image or tile, then this effect would not be suitable. Thanks to @Mi-Creativity for pointing that out.
Not effective if the element has different background other than straight colors — like white — it won’t work if the background is an image or a pattern
Thanks @Mi-Creativity. Considering the criteria of the original question, I just wanted to provide an alternative to adding additional DOM elements. You’re absolutely right about a textured background and I will make a note of it.
Considering the image shown in the question as well as most webpage designs currently this answer will work just fine since the majority of webpages backgrounds are just solid colors, but Iwas trying to achieve same thing trying to answer this question and I faced this problemso I just wanted to point that the blank space is a solid color «white» rather than transparency
how to offset a CSS border up and left
We have a WordPress sidebar designed like this: Note the grey border of the large white div is offset up and left (ignore the same effect on the image inside the white div please) — we want the border offset in our final design. I’ve tried building this with HTML:
.sidebar-primary < float: right; width: 20.5%; margin-right: 2%; position: relative; z-index: 9999; border: 4px solid #494242; >.sidebar-primary section
However, on the live page the inner section covers the outer aside ‘s border on the right and the bottom. I’ve set a z-index for the aside (9999) and section (9998), and position: relative; but the issue remains. Help appreciated.
Offset border effect in pure css
I am trying to create an offset border effect. Can this be done with pure css. These are buttons so will be different sizes and colours.
2 Answers 2
I use pseudo-element :after to create offset border effect.
Update
As web-tiki pointed out in comments on this answer, you can achieve the entire affect entirely with box-shadow . Take a look at their JSFiddle demo here: https://jsfiddle.net/5a0bvyup.
I’m going to leave my answer in the state I submitted it in because it does give some idea of how their implementation works (and if you look closely you’ll see how their box-shadow differs from the one described below).
Note: In my answer I’ve made the foreground box red instead of white to demonstrate that this ‘offset border’ does not overlap the initial element. You’ll need to change this back to white yourself.
The Left and Bottom Borders
You can achieve the left and bottom borders really easily with box-shadow . You simply need to create a solid shadow which matches the background colour, and then behind that add a second shadow which matches the foreground colour, offset by one pixel:
The Top and Right Borders
You can then use pseudo-elements ( ::before and ::after ) to fill in those extra borders:
body < background: black; padding: 30px; >div < background: red; height: 72px; width: 192px; box-shadow: -2px 2px 0 5px black, -7px 7px 0 1px white; position: relative; >div::before < background: white; content: ''; position: absolute; height: 1px; width: 7px; top: 6px; right: 100%; >div::after