border for before after


<body>
	<div class="box">
		<h1><img src="" alt="" width="50px" height="40px"/> Typography</h1>
		<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.</p>
	</div>
	<style type="text/css">
.box{
    width:400px;
    padding:25px;
    position:relative;
    border:1px solid #ddd;
    margin:100px auto;
}
.box::before{
    width:50%;
    height:25px;
    background:#fff;
    border-bottom:1px solid #ddd;
    position:absolute;
    content:"";
    right:-1px;
    top:-1px;
}
.box::after{
    width: 35px;
    height: 35px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    position: absolute;
    content: "";
    left: 50%;
    top: -18px;
    transform: rotate(45deg);
    margin-left: -15px;
}
	</style>
</body>