Set CSS Border to End in a 90 Instead of a 45 Degree Angle

set css border to end in a 90 instead of a 45 degree angle

Sad fact: Border corners are mitered. Always. (It's only visible if using different colors.)

In order to simulate a butt joint, you can stack two divs to get a simulated result:

div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100px;
  width: 100px;
}

<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>

How to create a border that fully covers the adjacent corners in CSS?

You could draw these with inset shadows and padding :

div {  padding:12px 5px 5px;  width: 40%;  height: 200px;  box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px  gray}

<div></div>

Thick CSS borders not giving a clean rectangle

Here is a hacky way you can fix a clean rectangle top-border:

HTML

<div id="test_div"></div>

CSS

#test_div:before { 
    position:absolute; 
    width:100%; 
    padding:1px; 
    top:0; 
    content: '';
    left:-1px;
    background:#000; 
    height:1px; }

#test_div { 
    border: 1px solid #E3E3E3; 
    border-top:0; 
    width: 300px;
    height: 250px; 
    position:relative; }

jsFiddle

Is it possible to have top-border take up full width in an element with other borders?

You can use box-shadow property...

div {  box-sizing: border-box;  width: 100px;  height: 100px;  border-top: 20px solid black;  box-shadow: inset -20px 0px green, inset 20px 0px 0px green, inset 0 -20px 0px green;}

<div></div>

CSS Full Border top?

This would gove you the desired result:

HTML

<div id="a"><div id="b"></div></div>

CSS

div#a {
    border-top: blue 20px solid;
    width: 140px;
}
div#b {
    height: 100px;
    border-left: red 20px solid;
    border-right: red 20px solid;
}

Drawing 45 Degree angle with CSS3

You should use rotate instead of skew for this. I have also changed the position of your :before element so its bottom right corner lines up with the bottom left corner of your flick class and then set the transform origin to the shared corner, creating exactly the effect you wanted (I also moved it away from the top so the effect would be visible):

.flick .text {  position: relative;  z-index: 50;}.flick {   margin-top: 200px;  background-color: #055468;  color: white;  margin-left: 140px;  padding: 15px;  position: relative;}.flick:before {  background: #055468;  content: "";  width: 100px;  height: 100%;  position: absolute;  bottom: 0;  right: 100%;  transform: rotateZ(45deg);  transform-origin: bottom right;  width: 80px;}

<div class="flick"><span class="text">Hello world</span></div>

Make borders not overlap visually

This will do the job for you. Pure CSS. No need for additional elements.

DEMO http://jsfiddle.net/Wa568/3/

CSS:

div.box {
    position: relative;
    width: 200px;
    padding: 15px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ccc;
    border-left: 10px solid transparent;
}
div.box:hover {
    border-left: 10px solid #0a0;
}
div.box:after {
    display:block;
    position: absolute;
    bottom: 0;
    left:-10px;
    width:calc(100% + 10px);
    height:1px;
    border-bottom: 1px solid #000;    
    content: " ";
}
div.box:hover:after {
    width:100%;
    left:0px;
}

HTML:

<div class="box">awesome content</div>

Is it possible to create an angled corner in CSS?

It's a little difficult keeping the border, but I managed to achieve a close effect using :before and :after elements with a parent container (:before and :after don't work on an img tag)

1. Add a border to the container

2. Add a before to block out a corner and offset by -1 to cover the border

3. Add an after that's slightly offset from the before to create the line inside the cut off

As you can see, the thickness of the 45deg line is a bit of an issue:

.cutCorner {    position:relative; background-color:blue;     border:1px solid silver; display: inline-block;}
.cutCorner img {    display:block;}
.cutCorner:before {    position:absolute; left:-1px; top:-1px; content:'';    border-top: 70px solid silver;    border-right: 70px solid transparent;}
.cutCorner:after {    position:absolute; left:-2px; top:-2px; content:'';    border-top: 70px solid white;    border-right: 70px solid transparent;}

<div class="cutCorner">    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" /></div>

---

Related Topics