How to Add Border in My Clip-Path: Polygon(); CSS Style

How to add border in my clip-path: polygon(); CSS style

Can border be applied to a clipped element along the clip path?

No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. You can see this in the below snippet:

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 3px solid;
  background: darkseagreen;
}
div + div {
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
  clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
}

<div></div>
<div></div>

CSS - How to add a border color to a css shape

Pseudo-Element

A nice way to do this would be with a pseudo-element like a :before

Make exactly the same shape but slightly smaller which holds the main color you want and position it correctly and you get the border you want.

.shape {  width: 400px;  height: 40px;  background-color: black;  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);  position: relative;}
.shape:before {  content: '';  width: 398px;  height: 38px;  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);  background: green;  display: block;  position: absolute;  top: 1px;  left: 1px;}

<div class="shape"></div>

How to get a border around this polygon?

The border property goes around the outside of an element, and the clip-path property applies a mask to an element. So, as far as other CSS rules are concerned, you're still dealing with a rectangle. Because of this, you can't simply apply a border.

It's not impossible to get very close to the effect you want, however. Using (and abusing) CSS pseudo-elements, borders, and filters you can create the same shape plus an outline with only a single HTML div.

div {  position: relative;  width: 210px;  height: 280px;  background: #1e90ff;  border-bottom-left-radius: 15px;  border-top-left-radius: 15px;  filter:    drop-shadow( 0px  3px 0 black)    drop-shadow( 0px -3px 0 black)    drop-shadow( 3px  0px 0 black)    drop-shadow(-3px  0px 0 black);  -webkit-filter:    drop-shadow( 0px  3px 0 black)    drop-shadow( 0px -3px 0 black)    drop-shadow( 3px  0px 0 black)    drop-shadow(-3px  0px 0 black);}div::after {  position: absolute;  display: block;  content: '';  width: 0;  height: 0;  left: 210px;  top: 0;  border-left: 70px solid #1e90ff;  border-right: 70px solid transparent;  border-top: 140px solid transparent;  border-bottom: 140px solid transparent;}

<div></div>

How to use clip-path property for border in css

add some gradient to fill the missing spaces:

.test {
  background: red;
  width: 100px;
  height: 100px;
  box-sizing:border-box;
  
  /* CORNERS */
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.test:hover {
  --grad:transparent 49.5%,green 50%;
  background: 
    linear-gradient(to top right   ,var(--grad)) top    right,
    linear-gradient(to top left    ,var(--grad)) top    left,
    linear-gradient(to bottom right,var(--grad)) bottom right,
    linear-gradient(to bottom left ,var(--grad)) bottom left,
    white;
  background-size:13px 13px; /* 10px of the clip-path + 3px of border */
  background-repeat:no-repeat;
  background-origin:border-box;
  cursor: pointer;
  
  border: 3px solid green;
}

<div class='test'>
 </div>

CSS - Add border color on clip path polygon

You can fake it with several drop shadow filters. There isn't much support, but cli path doesn't have much either ...

.image-center {  width: 300px;  height: 300px;  margin: 0 auto;  -webkit-filter: drop-shadow(2px 2px 0px red)    drop-shadow(2px -2px 0px red)    drop-shadow(-2px 2px 0px red)    drop-shadow(-2px -2px 0px red);  filter: drop-shadow(2px 2px 0px red)    drop-shadow(2px -2px 0px red)    drop-shadow(-2px 2px 0px red)    drop-shadow(-2px -2px 0px red);}.shape {  width: 300px;  height: 300px;  -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);  clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);}img {  width: 300px;  height: 300px;}

<div class="image-center">  <div class="shape">    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" />  </div></div>

css - clip image and add border to fit in div

Adjust the different values and you can do it with border-radius:

.my-clip {
  position: absolute;
  left: 50%;
  top: -6%;
  transform: translate(-50%);
  /*clip-path: circle(80px at 50% 25%); no more needed*/
  background-color: #bdbdbd;
}

.square {
  position: relative;
  width: 160px;
  height: 160px;
  overflow: hidden;
  border: 1px solid red;
  border-radius: 50%;
}

<div class="square">
  <img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>

Polygon border of a button with transparent background

Your idea is good but you will need to fix the math which is the complex part here.

You will notice that this will also affect the content so I add it as pseudo element to avoid this:

.p-button {
  position:relative;
  padding: 14px 50px;
  font-size:45px;
  text-decoration:none;
}

.p-button:before{
  content:"";
  position:absolute;
  inset:0;
  background:black;
  --b: 4px; /* border width */
  --h:34px; /* this is half the height, adjust it based on your code */
  --b1: calc(0.866*var(--b));
  --b2: calc(0.5*var(--b)); 
  clip-path:polygon(
    
    0 50%,
    calc(0.134*var(--h))  25%,   /* 0.134 = 1 - cos(30)   */
    calc(  0.5*var(--h))  6.7%,  /* 6.7% = 0.134/2 * 100% */
    var(--h) 0,
    calc(100% - var(--h)) 0,
    calc(100% - 0.5*var(--h))   6.7%,
    calc(100% - 0.134*var(--h)) 25%,
    100% 50%,
    calc(100% - 0.134*var(--h)) 75%,
    calc(100% - 0.5*var(--h))   93.3%, /* 93.3% = 100% - 6.7% */
    calc(100% - var(--h)) 100%,
    var(--h) 100%,
    calc(  0.5*var(--h))  93.3%,
    calc(0.134*var(--h))  75%,
    0 50%,
    
    var(--b) 50%,
    calc(0.134*var(--h) + var(--b1))  calc(75% - var(--b2)),
    calc(  0.5*var(--h) + var(--b2))  calc(93.3% - var(--b1)),
    var(--h) calc(100% - var(--b)),
    calc(100% - var(--h)) calc(100% - var(--b)),
    calc(100% - 0.5*var(--h)  - var(--b2))  calc(93.3% - var(--b1)),
    calc(100% - 0.134*var(--h) - var(--b1)) calc(75% - var(--b2)),
    calc(100% - var(--b)) 50%,
    calc(100% - 0.134*var(--h) - var(--b1)) calc(25% + var(--b2)),
    calc(100% - 0.5*var(--h)  - var(--b2))  calc(6.7% + var(--b1)),
    calc(100% - var(--h)) var(--b),
    var(--h) var(--b),
    calc(  0.5*var(--h) + var(--b2))  calc(6.7% + var(--b1)),  
    calc(0.134*var(--h) + var(--b1))  calc(25% + var(--b2)),   
    var(--b) 50%) ;
}

body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background:linear-gradient(45deg,red,lightblue);
}

<a class="p-button" href="">Demo it</a>

Add Border to Clipped Div

Change your -webkit-clip-path value to this and then it works fine, do add vendor prefixes such as -webkit-, -moz-, -ms-, -o- to clip-path, because many browsers have partial support to this property.

-webkit-clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0%, 82% 0);

body {    margin:50px;    background:white;}div{   min-width:400px;   height:auto;    background:rgb(122, 206, 122);    transform: skew(-10deg) rotate(2deg);    -webkit-transform: skew(-10deg) rotate(2deg);    -moz-transform: skew(-10deg) rotate(2deg);    border: 2px solid red;    -webkit-clip-path:polygon(0 0, 0 100%, 100% 100%, 100% 0%, 82% 0);    padding:10px;}div > p {    transform: skew(10deg) rotate(-2deg);    -webkit-transform: skew(10deg) rotate(-2deg);    -moz-transform: skew(10deg) rotate(-2deg);    padding:3% 2%;    width:100%;    height:auto;}

<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper mattis risus cursus lobortis. Etiam in erat erat. Morbi venenatis quam enim, elementum bibendum elit sollicitudin mollis. Integer rutrum orci sed cursus consectetur. Aliquam vitae consequat augue. Suspendisse pharetra sit amet lacus eget semper. Sed condimentum suscipit faucibus.</p></div>

How to Add Border in My Clip-Path: Polygon(); CSS Style