Adding a border to div with top triangle

Question

I'm trying to add a border to div with top triangle

issue is border is not getting applied to the triangle part

body {
  background-color: #F3F5F6;
}
.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #FFFFFF;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

<div class="info-panel">
  Testing
</div>

I dont want to add a css box shadow.

I need a border.

jsFiddle

Khaled Mashaly · Accepted Answer · 2016-11-09T18:24:32.590

Actually the "triangle part" is a border itself, that's why you can't apply a CSS border to it, However there's a workaround.

use the :before pseudo-element to create another triangle bigger than the first and apply your border color to it.

.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:before, .info-panel:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  width: 0;
  height: 0;
}
.info-panel:before {
  left: 19px;
  border: 11px solid transparent;
  border-bottom-color: #ddd;
}
.info-panel:after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: #fff;
}

<div class="info-panel">
  Testing
</div>

thank you much works like a charm. – Jordyn Nov 09 '16 at 18:08 — Jordyn, Nov 09 '16 at 18:08

score 1 · Answer 2 · answered Nov 09 '16 at 18:02

Just take off this

.info-panel:after {
    border-bottom-color: #FFFFFF;
}

It is overriding border green on it.

check this snippet

.info-panel {
  display: block;
  position: relative;
  background: #FFFFFF;
  padding: 15px;
  border: 1px solid #DDDDDD;
  margin-top: 20px;
}
.info-panel:before {
  border: 1px solid #DDDDDD;
}
.info-panel:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid green;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

<div class="info-panel">
  Testing
</div>

Hope it helps

i'm sorry that was my mistake but what i really want is my gray border to go around the triangle just like in other parts — Jordyn, Nov 09 '16 at 18:07

score 1 · Answer 3 · answered Nov 09 '16 at 18:09

You can achieve that with fontAwesome. See my example and adjust as needed

.info-panel {
     display: block;
     position: relative;
     background: #FFFFFF;
     padding: 15px;
     border:1px solid #DDDDDD;
     margin-top:20px;
    }
   
    .info-panel:after, .info-panel:before {
     content: '\f0d8';
      font-family: fontAwesome;
     display: block;  
     position: absolute;
      font-size: 36px;
     left: 20px;
     bottom: 100%;
      top: -22px;
     width: 0;
     height: 0;
      color: #ccc; /* should be your desired border color */
    
    }
    
  .info-panel:before {
    color: white;
    z-index: 2;
    top: -21px;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="info-panel">
    Testing
</div>

Adding a border to div with top triangle

3 Answers3