How can i make custom border corners using images in css/html?

Question

Is there any good way i can have custom corners like that?

Height will change depends how much text is inside, width can be constant, don't care.

html

    <table class="npc_chat_div" style="width: 80%;" cellspacing="0" cellpadding="0" border="0"><tbody><tr>
    <td style="width:11px;"><div class="t1" style="display:block;width:45px;height:47px;position:absolute;top:28px;"></div></td>
    <td style="width:85px;"><div class="t2" style="display:block;width:85px;height:31px;"></div></td>
    <td style="width:100%;"><div class="t3" style="display:block;width:100%;height:11px;"></div></td>
    <td style="width:11px;"><div class="t4" style="display: block;width: 47px;height: 45px;position: absolute;top: 28px;right: 8px;"></div></td>
  </tr><tr class="m_tr">
    <td class="m1"></td>
    <td colspan="2" class="m2">

<div class="m3" style="overflow:auto;background:transparent;border:none;min-height:12px;height:100%;"><span>
<p>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br></div>

    </td>
    <td class="m4"></td>
  </tr><tr>
    <td class="b1" style="width:11px;"><div style="display:block;width:11px;height:24px;"></div></td>
    <td class="b2" style="width:85px;"><div style="display:block;width:85px;height:24px;"></div></td>
    <td class="b3" style="width:100%;"><div style="display:block;width:100%;height:24px;"></div></td>
    <td class="b4" style="width:11px;"><div style="display:block;width:11px;height:24px;"></div></td>
  </tr>
</tbody></table>

css

.npc_chat_div_r td, .npc_chat_div td {
    vertical-align: bottom !important;
}
.npc_chat_div_r .t3, .npc_chat_div .t3 {
    color: #002bb8 !important;
    text-align: right;
    font-size: 80%;
}
.npc_chat_div_r .m3, .npc_chat_div .m3 {
    padding: 4px 6px 4px 6px;
}
.npc_chat_div_r .t3 > a, .npc_chat_div .t3 > a {
    color: #002bb8 !important;
}
.npc_chat_div_r .t1, .npc_chat_div .t1 {
    background: url('http://i.imgur.com/uWGaaat.png');
}
.npc_chat_div_r .t2, .npc_chat_div .t2 {
    background: url('http://i.imgur.com/phPB10t.png');
}
.npc_chat_div_r .t3, .npc_chat_div .t3 {
    background: url('http://i.imgur.com/2fIrT0n.png');
}
.npc_chat_div_r .t4, .npc_chat_div .t4 {
    background: url('http://i.imgur.com/48YiCrA.png');
}
.npc_chat_div_r .m1, .npc_chat_div .m1 {
    background: url('http://i.imgur.com/JuJ5shQ.png');
}
.npc_chat_div_r .m4, .npc_chat_div .m4 {
    background: url('http://i.imgur.com/QcpyKdi.png');
}
.npc_chat_div_r .b1, .npc_chat_div .b1 {
    background: url('http://i.imgur.com/hcl2E9G.png');
}
.npc_chat_div_r .b2, .npc_chat_div .b2 {
    background: url('http://i.imgur.com/U6N8SN3.png');
}
.npc_chat_div_r .b3, .npc_chat_div .b3 {
    background: url('http://i.imgur.com/U6N8SN3.png') repeat-x;
}
.npc_chat_div_r .b4, .npc_chat_div .b4 {
    background: url('http://i.imgur.com/ePuqEJF.png');
}
/** Plain style **/
.npc_chat_div_r a {
    text-decoration: underline !important;
}
.npc_chat_div_r p {
    margin: 0px;
}
.npc_chat_div_r span.pl {
    font-style: normal !important;
    font-weight: bold
}
.npc_chat_div_r span.pl>span.i {
    font-style: italic;
    font-weight: normal !important
}
.npc_chat_div_r .m3 {
    font: 11px/14px Tahoma, sans-serif;
}
/** Tibia style */
.npc_chat_div a {
    color: #A8E051 !important;
    text-decoration: underline !important;
}
.npc_chat_div b {
    color: #25FFBA;
}
.npc_chat_div p {
    margin: 0px;
}
.npc_chat_div span.pl a {
    color: #3D7F8E !important;
}
.npc_chat_div span.pl b, .npc_chat_div span.pl i {
    color: #3D7F8E;
    font-style: normal;
}
.npc_chat_div span.pl {
    color: #3D7F8E;
}
.npc_chat_div span.pl > span.i {
    font-style: italic;
}
.npc_chat_div .m2 {
    background: #050F17;
}
.npc_chat_div .m3 {
    color: #A8E051;
    font: bold 11px/14px Tahoma, sans-serif;
    scrollbar-shadow-color: #1D1D1D;
    scrollbar-highlight-color: #434343;
    scrollbar-face-color: #444444;
    scrollbar-drakshadow-color: #1D1D1D;
    scrollbar-3dlight-color: #949494;
    scrollbar-arrow-color: #8E8E8E;
    scrollbar-track-color: #373837;
    padding: 1em;
}

Heres the part effect i want to accomplish. It doesn't have to be table.

https://jsfiddle.net/su6wbgd2/

user7234396 · Accepted Answer · 2016-12-26 04:25:18Z

The fiddle you linked to uses images to achieve the effect. See this image

If you don't mind something a bit less complex for a corner, you can achieve that with CSS.

Here's a great example by I.M. Skeer on CodePen all credit goes back to him/her:

body {
  background-color: #000;
  color: #fff;
}
.container {
  overflow: hidden;
  width: 200px;
  height: 200px;
}
div.bite {
  box-sizing: border-box;
  position: relative;
  background-color: #000;
  height: 200px;
  width: 200px;
  border: solid white 4px;
  padding: 35px;
}
.top,
.bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.top:before,
.top:after,
.bottom:before,
.bottom:after {
  content: " ";
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #000;
  border: solid white 4px;
  border-radius: 15px;
}
.top:before {
  top: -35px;
  left: -35px;
}
.top:after {
  top: -35px;
  right: -35px;
  box-shadow: inset 1px 1px 1px white;
}
.bottom:before {
  bottom: -35px;
  left: -35px;
}
.bottom:after {
  bottom: -35px;
  right: -35px;
  box-shadow: inset 1px 1px 1px white;
}

<div class="container">
  <div class="bite">
    <div class="top">&nbsp;</div>
    <p>Anything you like to put in here</p>
    <div class="bottom"></div>
  </div>
</div>

And this is the link to the original CodePen page

Tafonath · Accepted Answer · 2016-12-26 12:40:03Z

I forced it to work, probably in bad way but still...

HTML

<div class="m3" style="overflow:auto;background:transparent;border:none;min-height:12px;height:100%;"><span>
<p>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br><span>
<i>NPC</i>: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b>.</span><br><span>
</span><span class="pl"><span class="i">Player</span>: <b> bla bla</b></span><br></div>

    </td>
    <td class="m4"></td>
  </tr><tr>
    <td class="b1" style="width:11px;"><div></div></td>
    <td class="b2" style="width:85px;"><div style="display:block;width:85px;height:24px;"></div></td>
    <td class="b3" style="width:100%;"><div style="display:block;width:100%;height:24px;"></div></td>
    <td class="b4" style="width:11px;"><div></div></td>
  </tr>
</table>

CSS

.npc_chat_div_r td, .npc_chat_div td {
    vertical-align: bottom !important;
}
.npc_chat_div_r .t3, .npc_chat_div .t3 {
    color: #002bb8 !important;
    text-align: right;
    font-size: 80%;
}
.npc_chat_div_r .m3, .npc_chat_div .m3 {
    padding: 4px 6px 4px 6px;
}
.npc_chat_div_r .t3 > a, .npc_chat_div .t3 > a {
    color: #002bb8 !important;
}
.npc_chat_div_r .t1, .npc_chat_div .t1 {
    background: url('http://i.imgur.com/uWGaaat.png') no-repeat;
}
.npc_chat_div_r .t2, .npc_chat_div .t2 {
    background: url('http://i.imgur.com/WcihOkH.png') no-repeat;
}
.npc_chat_div_r .t3, .npc_chat_div .t3 {
    background: url('http://i.imgur.com/2fIrT0n.png') repeat-x;
}
.npc_chat_div_r .t4, .npc_chat_div .t4 {
    background: url('http://i.imgur.com/48YiCrA.png') no-repeat;
}
.npc_chat_div_r .m1, .npc_chat_div .m1 {
    background: url('http://i.imgur.com/JuJ5shQ.png') repeat-y;
}
.npc_chat_div_r .m4, .npc_chat_div .m4 {
    background: url('http://i.imgur.com/QcpyKdi.png') repeat-y;
}
.npc_chat_div_r .b1, .npc_chat_div .b1 {
    display: block;
    position: relative;
    top: -34px;
}
.npc_chat_div_r .b1, .npc_chat_div .b1 > div {
    background: url('http://i.imgur.com/hcl2E9G.png') no-repeat;
    width: 45px;
    height: 47px;
    display: block;
    position: relative;
}
.npc_chat_div_r .b2, .npc_chat_div .b2 {
    background: url('http://i.imgur.com/U6N8SN3.png') repeat-x;
}
.npc_chat_div_r .b3, .npc_chat_div .b3 {
    background: url('http://i.imgur.com/U6N8SN3.png') repeat-x;
}
.npc_chat_div_r .b4, .npc_chat_div .b4 > div {
  display: block;
  width: 45px;
  height: 47px;
  background: url('http://i.imgur.com/ePuqEJF.png') no-repeat;
  position: relative;
  top: -36px;
  right: 34px;
}

/** Plain style **/
.npc_chat_div_r a {
    text-decoration: underline !important;
}
.npc_chat_div_r p {
    margin: 0px;
}
.npc_chat_div_r span.pl {
    font-style: normal !important;
    font-weight: bold
}
.npc_chat_div_r span.pl>span.i {
    font-style: italic;
    font-weight: normal !important
}
.npc_chat_div_r .m3 {
    font: 11px/14px Tahoma, sans-serif;
}
/** Tibia style */
.npc_chat_div a {
    color: #A8E051 !important;
    text-decoration: underline !important;
}
.npc_chat_div b {
    color: #25FFBA;
}
.npc_chat_div p {
    margin: 0px;
}
.npc_chat_div span.pl a {
    color: #3D7F8E !important;
}
.npc_chat_div span.pl b, .npc_chat_div span.pl i {
    color: #3D7F8E;
    font-style: normal;
}
.npc_chat_div span.pl {
    color: #3D7F8E;
}
.npc_chat_div span.pl > span.i {
    font-style: italic;
}
.npc_chat_div .m2 {
    background: #050F17;
}
.npc_chat_div .m3 {
    color: #A8E051;
    font: bold 11px/14px Tahoma, sans-serif;
    scrollbar-shadow-color: #1D1D1D;
    scrollbar-highlight-color: #434343;
    scrollbar-face-color: #444444;
    scrollbar-drakshadow-color: #1D1D1D;
    scrollbar-3dlight-color: #949494;
    scrollbar-arrow-color: #8E8E8E;
    scrollbar-track-color: #373837;
    padding: 1em;
}

Fiddle: https://jsfiddle.net/su6wbgd2/1/

Collectives™ on Stack Overflow

How can i make custom border corners using images in css/html?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related