You will need a new element to simulate the “border” of the pointer since the pointer is already using borders to create the triangle effect.
You can simply use the “:” before pseudo-class to create a red pointer that will be placed under the white pointer.
HTML
<div class="bubble">
<span>Border After</span>
</div>
CSS
<style>
.bubble {
margin-top: 14.85px; /* Get pseudo-element visibile triangle height: (c^2 = a^2 + b^2) / 2 */
/* (c^2 = <pseudo-element width>^2 + <pseudo-element height>^2) / 2 */
text-align:center;
padding:20px;
background-color: white; /* Change container background */
border: 1px solid blue; /* Change container border */
position: relative;
box-sizing: border-box;
border-radius: 4px;
}
.bubble::before {
content: '';
width: 20px;
height: 20px;
background-color: inherit; /* Inherit container background */
border-left: inherit; /* Inherit container border-left */
border-top: inherit; /* Inherit container border-top */
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
box-sizing: inherit;
}
.bubble > * {
position: relative; /* Position direct children on top of pseudo-element */
}
</style>
Output
Border After
Total Views: 1,690