CSS Different Border Widths Overlapping Themselves

CSS different border widths overlapping themselves

You can make the top border a perfect rectangle and still have the other borders the way you want them by using the div's ::after pseudo element.

Put the top border on the div itself and the other three borders on the pseudo-element.

For example:

.border {
    width: 200px; height: 200px; border-top:5px solid #894b9d;
    padding: 0 1px 1px 1px;
    position:relative;
}
.border::after {
    display:block; content:'';
    position:absolute; top:0; left:0;
    width:200px; height:200px;
    border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}

See updated fiddle.

Edit:

Or if you don't want to rely on a given width and height, like this:

.border {
    display:inline-block;
    position:relative;
    padding:.5em;
    border-top:5px solid #894b9d;
}
.border::after {
    display:block; content:'';
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}

I've made it an inline-block, to show that it works fine with dynamic content sizes, but you can work with all kinds of widths.

more updated fiddle.

Draw overlapping border with CSS onto varying size images

You can wrap the <img> tag with a <div>, and use the div's ::before and ::after pseudo elements to draw the borders. The <div> element size will fit itself to the image inside because of display: inline-block.

.imageFrame {  display: inline-block;  position: relative;  font-size: 0; /** required to remove white space **/}
.imageFrame::before, .imageFrame::after {  position: absolute;  border-style: solid;  border-color: yellow;  content: '';}
.imageFrame::before {  top: 5px;  right: 0;  bottom: 5px;  left: 0;  border-width: 2px 0 2px 0;}
.imageFrame::after {  top: 0;  right: 5px;  bottom: 0;  left: 5px;  border-width: 0 2px 0 2px;}
.smaller {  width: 300px;  height: 200px;}

<div class="imageFrame">  <img src="https://pbs.twimg.com/profile_images/625769159339737088/2dwpQAXA.jpg"></div>
<div class="imageFrame">  <img src="https://s-media-cache-ak0.pinimg.com/236x/6f/7a/bb/6f7abbd4d03bf30068cdec219a29a1a9.jpg"></div>
<div class="imageFrame">  <img class="smaller" src="https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg"></div>

Border-top on input element is not straight

Try using box-shadow with no blur, you do have to add a margin though

input {    background-position: left 10px top 25px;    background-repeat: no-repeat;    background-size: 10px auto;    border: 1px solid #ccc;    color: #414042;    font-size: 25px;    font-stretch: condensed;    font-style: normal;    font-weight: lighter;    padding: 15px;    text-indent: 20px;    width: 50%;    box-shadow: 0px -15px 0px 0px #414042;    margin-top: 15px;}

<input type="text" placeholder="NOME" required>

Border-radius on two overlapping elements; background shines through

An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).

then:

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000 url("/path/to/image') repeat-y 0 0;
  cursor: pointer;
}

I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.

var prcnt = (YOURPERCENTAGE/100)* 366;

Why parent and child borders do not overlap?

That is just how the default CSS box model (called content-box) works. A box's size is equal to its specified width/height dimensions + padding + border.

box-sizing: border-box is a CSS property that changes the box model so that padding and border are inside the specified dimensions rather than added to them (e.g. specified width/height - padding - border). Using this has become increasingly popular in the last few years as many consider it an easier box model to work with, and it arguably makes responsive design a bit easier. All you need to do is add this to your stylesheet:

* { box-sizing: border-box; }

Borders never collapse with adjacent borders regardless of box model or context. You need to set borders individually (i.e. border-top: 1px solid #000) to accomplish that behavior.

The only time adjacent boxes have any kind of collapse property outside of tables is in some specific situations adjacent margins will collapse: more info here.

li elements overlapping? Share container width without overlapping?

Use flexboxes. Flexbox Guide . You will require multiple flexboxes
to achieve what you want. There will be a slight rework but then it w'd be much easier to do the alignments. You should also learn CSS Grids.

ul{
display:flex;
flex-direction:column;
justify-content:space-between;
}

---

Related Topics