CSS how to make a perfectly alligned left (or right) border?


Tags: html,css,twitter-bootstrap

Problem :

What I'm trying to accomplish in pure CSS is setting the left border of a Bootstrap 3 panel:

enter image description here

Here is the strandard way to do it:

.panel-default>.panel-heading.standard {
    border-left: 5px solid red;
}

Here is using pseudo-elements:

.panel-default>.panel-heading.pseudo:before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 4px;
    height: 100%;
    background-color: blue;
}

Result is not OK in both cases. With the standard way the border is kinda "oblique" (only in bottom-right corner, why?), with pseudo-elements I can make the rectangle margins negative (i.e. -1, -1) but then I need to know the exact height of the heading:

enter image description here



Solution :

You don't need to know the exact height of the heading, only the height of the borders. So, for example, if the borders on top and bottom are both 1px:

.panel-default>.panel-heading.pseudo:before {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0;
    content: " ";
    display: block;
    width: 4px;
    background-color: blue;
}

Demo: http://jsfiddle.net/sbr3q2tq/


    CSS Howto..

    How to get page-header and nav-pills to appear on the same line

    How to avoid messing formating up?

    How do I make a CSS sprite that controls multiple background images for multiple DIV's?

    How do I get Html Table to respect margins when its width is set to 100%?

    Dropdown not showing on small screens

    How can I get IE8 to accept a css :before tag?

    How can I force text to “normal” (not bold) using css?

    How to “reset” a DOM subtree's CSS style?

    Background images: how to fill whole div if image is small and vice versa

    How to use CSS selectors [closed]

    Third level drop down css wont show & content/links are out of order?

    How to center this stuff inside a link using CSS?

    How can I convert AI to HTML & CSS to use in ASP.Net Application

    how to put links in one line [CSS]

    How to add font awesome in CSS

    How to combine class and ID in CSS selector?

    css top nav - left nav (menu), title in center, right side (more buttons) - howto?

    php- How to strip CSS in the text

    how to create a vertical menu in html/css [closed]

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?

    How to make <'details'> drop down on mouse hover

    How do I customize