How to Use CSS to Distort Borders So They Look Like Sketched

Can I use CSS to distort borders so they look like sketched?

This article on hand-drawn borders gives a great example of achieving this effect on buttons using only CSS by using large elliptical rounded corners (through the CSS border-radius property). It probably won't work as well for large div elements.

Example adapted from the article:

button {      background:transparent;      padding:0.5rem 0.5rem;      margin:0 0.5rem;      font-size:1rem;
      border-top-left-radius: 255px 15px;      border-top-right-radius: 15px 225px;      border-bottom-right-radius: 225px 15px;      border-bottom-left-radius:15px 255px;}
button:hover{   box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);}button.lined.thick{   border:solid 3px #41403E;}button.dotted.thick{   border:dotted 3px #41403E;}button.dashed.thick{  border:dashed 3px #41403E;}button.lined.thin{   border:solid 2px #41403E;}button.dotted.thin{   border:dotted 2px #41403E;}button.dashed.thin{  border:dashed 2px #41403E;}

<button class='lined thick'>Lined Thick</button><button class='dotted thick'>Dotted Thick</button><button class='dashed thick'>Dashed Thick</button><div> </div><button class='lined thin'>Lined Thin</button><button class='dotted thin'>Dotted Thin</button><button class='dashed thin'>Dashed Thin</button>

How to make advance shape of CSS?

.labelModel {
  display: block;
  position: absolute;
  z-index: 100;
  border: 2px solid #ccc;
  cursor: pointer;
  width: 12rem;
  height: 12rem;
  margin-left: 100px;
}
.labelBox{
background-color: #404040;
width:89%;
height:89%;
padding: 10px;
transform: rotate(1deg);
color:orange;

}

.line-infocard {
  position: relative;
  top: 200px;
  right:50px;
  width: 150px;
  height: 2px;
  z-index: 99;
  
  background-color: #404040;
  transform: rotate(-60deg);
}
.line-infocard::after{
content:'';
width:2px;
height:40px;
background-color:black;
top: 88%;
right: -11px;
position: absolute;
transform: rotate(
-28deg);
}

<div>
  <div class="line-infocard"></div>
  <div class="labelModel">
    <div class="labelBox">
      info :
    </div>
  
  </div>
</div>

Creating Natural Edge with CSS

Maybe an SVG filter can get you closer and you don't need to change a lot in your code. I simply replaced the gradient trick with a clip-path

#strat-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  filter: url('#goo');
}

#strat-column {
  margin: 30px auto;
  width: 90px;
}

.member {
  width: 120px;
  position: relative;
}

.slope {
  clip-path:polygon(0 0,0 100%,100% 100%,80% 0);  
}

<div id="strat-pane">
  <div id="strat-column">
    <div id="m1" class="member slope" style="height: 15px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
    <div id="m2" class="member slope" style="height: 15px; background-image: url("img/pngs/Ss.png"); background-color: gray;"></div>
    <div id="m3" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
    <div id="m4" class="member slope" style="height: 15px; background-image: url("img/pngs/Mi.png"); background-color: #E46254;"></div>
    <div id="m5" class="member slope" style="height: 15px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
    <div id="m6" class="member slope" style="height: 15px; background-image: url("img/pngs/Ss.png"); background-color: gray;"></div>
    <div id="m7" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
    <div id="m8" class="member slope" style="height: 20px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
    <div id="m9" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
    <div id="m10" class="member slope" style="height: 20px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
    <div id="m11" class="member ledge" style="height: 15px; background-image: url("img/pngs/Cg.png"); background-color: gray;"></div>
    <div id="m12" class="member slope" style="height: 30px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
    <div id="m13" class="member ledge" style="height: 15px; background-image: url("img/pngs/Cg.png"); background-color: gray;"></div>
    <div id="m14" class="member slope" style="height: 75px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
    <div id="m15" class="member ledge" style="height: 350px; background-image: url("img/pngs/Cg.png"); background-color: #e44539;"></div>
    <div id="m16" class="member slope" style="height: 350px; background-image: url("img/pngs/Ss.png"); background-color: #de9b81;"></div>
  </div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -15" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

HTML border thickness on zoom

its because of browser, when usinng zoom in browser it will only render how it would look like at choosen zoom level, so if you have 1px border at 110% its 1.1px border. Since you cant show only part of a pixel, it will show either 1px or 2px

Issue with drawing borders CSS font awesome icons

Please run the code snippet below,

.border-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em;  }.border-square {   color: #b0b0b0;  border-radius:25%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/><i class="fa fa-check-circle fa-3x border-circle"></i><i class="fa fa-check-circle fa-3x border-square"></i><i class="fa fa-check-square fa-3x border-circle"></i><i class="fa fa-check-square fa-3x border-square"></i>

How does border-image work with linear-gradient?

TL;DR

When using a gradient, the size of the image is the size of the element. The border-image-width will define the 9 regions where we will place the slices (if not defined, border-width is used). The border-image-slice will consider the initial image to create the slices. A unitless value is considered as a pixel value and a percentage value is resolved against the size of the element.

To have a perfect result we should have the slices equal to regions, and for this we need to have the border-image-slice equal to border-image-width (or border-width) when used without a unit. Using a percentage, the computed value should be the same.

In your case 80 in the slice means 80px and you have a border of 5em which is 5x16px = 80px.

---

Let's take an easy example.

div {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 10px solid transparent;
}

div.box {
  background: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 10px) border-box, red;
}

div.border {
  border-image: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 10px) 50 fill;
  border-image-width: 50px;
  background: red;
}

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

<div class="border"></div>

---

Related Topics