I would like to make a border like the image below, which comes out of the image and that is under the text Design Your Ring.
* {
margin: 0px;
}
div {
height: 300px;
width: 300px;
background-color: gray;
float: left;
text-align: center;
}
h1 {
text-align: right;
}
hr {
float: left;
width: 300px;
color: rgba(150,140,190,.5);
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div>Foto Aqui</div>
<h1>Teste</h1><br>
<hr>
</body>
</html>