How to Fix a CSS Border That Isn't Showing Properly?
Asked by
MelodyMaker92
I'm working on a website to showcase some songs I've made, and I'm running into a problem with a blue border on the left side—it's supposed to represent an oscilloscope. The issue is that the border doesn't center correctly; it gets cut off instead of resizing properly. I've got a good grasp of JavaScript, but CSS is more of a challenge for me. I'm sure the solution is quite simple, but I could really use your help! I also stripped down the JavaScript and unnecessary CSS, so the essential parts are all in this jsFiddle link: [https://jsfiddle.net/FFFunkyDrummer/fyoba62e/12/](https://jsfiddle.net/FFFunkyDrummer/fyoba62e/12/)
Answers
Make sure your element has some defined width or height. Borders can be tricky and often disappear if the div is empty. Check that first.
Reply to this answer
Don’t forget about the display type of your element. If it's set to inline, borders can behave unexpectedly. Check that!
Reply to this answer
Absolutely check that `box-sizing` property; sometimes, width settings can interfere with the border displaying correctly.
Reply to this answer
Definitely consider the `box-sizing` issue. If you adjust it, your border should behave as expected.
Reply to this answer
You might want to look at the `box-sizing` property. Typically, borders are added outside of the defined width. So when you resize the container, it can appear like the border is getting cut off. Try setting `box-sizing: border-box;` on your element; it usually resolves these layout quirks.
Reply to this answer
Add your answer
Answers are reviewed before publication.
Related Discussions