CSS borderについて教えてください。

下記画像のような「01」(img要素)を囲むようなborderを描画するにはcssをどのように書けばいいのかアイデアがありません。
アドバイスお願いします。

HTML
1          <div class="tile_block">
2			  <img src="./assets/images/index/01_icon.png" alt="01">
3            <p class="tile_title">レーザー飛蚊症治療</p>
4            <p class="tile_text"> 飛蚊症の原因になっている硝子体の混濁を手術をしないで、安全にレーザーで取り除くことが実現できるようになりました。</p>
5            <p><a href="aka.html" class="tile_block__link">詳細はこちら<i class="fas fa-chevron-right"></i></a></p>
6          </div>

css
1	.tile_block{
2	border: 1px solid  color:#9e8435;
3	}
4	.tile_title{
5	font-size: 26px;
6	}
7	.tile_text{
8	font-size: 16px;
9	
10	}
11	.tile_block__link{
12         display: block;
13	 text-align: center;
14	 color:#9e8435;
15	}
16	.fa-chevron-right{
17	padding-left: 5px;
18	}

.tile_block要素をposition:relativeとしてimg要素をposition:absoluteteとして位置を調整し、z-indexでimg要素を前面に出してみたのでしが、見本のようには行きませんでした。

どのようにすれば添付画像のようにborderの中にimg(01)が入るのか教えてください。

すみません、追記です。

上記画像のようにホーバージにはborderが数字に被ることなく背景色が変わるようにしないといけません。

下記画像は私のコードを表示したもで、「０１」はjpg画像です。jpg画像だと数字のところがhover時には背景色が変わりません。
「02」はpngファイルです。pngだとborderが数字を突き抜けてします。

HTML
1        <div class="col-xs-12 col-md-3 tile-wrap">
2          <div class="tile_block">
3			  <img class="tile_block-img" src="./assets/images/index/01_icon.jpg" alt="01 レーザー飛蚊症治療">
4            <p class="tile_title">レーザー飛蚊症治療</p>
5            <p class="tile_text"> 飛蚊症の原因になっている硝子体の混濁を手術をしないで、安全にレーザーで取り除くことが実現できるようになりました。</p>
6            <a href="aka.html" class="tile_block__link">詳細はこちら<i class="fas fa-chevron-right"></i></a>
7          </div>
8        </div>
9		  <div class="col-xs-12 col-md-3 tile-wrap">
10          <div class="tile_block">
11			  <img  class="tile_block-img" src="./assets/images/index/02_icon.png" alt="02 眼球注射治療">
12            <p class="tile_title">眼球注射治療</p>
13            <p class="tile_text">加齢黄斑変性症、網膜血管閉塞症や糖尿病網膜症に伴う黄斑浮腫など、今まで難治と考えられてきた病気の治療が、VEGF阻害剤の眼球内投与で可能になりました。</p>
14            <a href="aka.html" class="tile_block__link">詳細はこちら<i class="fas fa-chevron-right"></i></a>
15          </div>
16        </div>

CSS
1	.tile_block{
2	padding: 0 2.6vw;
3	text-align: center;
4	border: 1px solid $color_primary;
5	cursor : pointer;
6	-webkit-transition: all 0.5s ease;
7    -moz-transition: all 0.5s ease;
8    -o-transition: all 0.5s ease;
9    transition: all  0.5s ease;
10	position: relative;
11	margin-bottom: 4.9vw;	
12	}		
13	.tile_block-img{
14		margin-top: -100px;
15		}
16	.tile_block:hover{
17		background-color: $color_secondary;
18	}
19	.tile_title{
20		padding: 2.8vw 0;
21		@include fontsize(26);
22	}
23	.tile_text{
24	margin-bottom: 6vw;
25	@include fontsize(16);
26	
27	}
28	.tile_block__link{
29		color:$color_primary;
30		display: block;
31		text-align: center;
32		position: absolute;
33		bottom: 37px;
34		left: 50%;
35		transform: translateX(-50%);
36		-webkit-transform: translateX(-50%);
37		-ms-transform: translateX(-50%);
38	}
39	.fa-chevron-right{
40	padding-left: 5px;
41	}

なんども申し訳ありません。
下記画像のようにするにはどうすればいいでしょうか?

行動規範の内容に同意します

回答2件

style
1<style>
2fieldset{border:solid 2px #9e8435;}
3legend{margin:auto;padding:0px 50px;}
4</style>
5<fieldset>
6<legend>01</legend>
7</fieldset>
8<form>

投稿2020/12/12 15:19

yambejp

総合スコア116724

Fukusuke0604

2020/12/13 02:18

すみません。質問内容に追記させていただきました。もしよろしければ確認いただけますでしょか? 何度もすみません。

yambejp

2020/12/13 08:07

legendにimgファイルを指定すればいけませんか？

Fukusuke0604

2020/12/14 04:20

ありがとうございます。非常にシンプルなコードで実現できたのですね。とても勉強になりました。

行動規範の内容に同意します

ベストアンサー

画像をネガティブマージンで上に移動させればいいでしょう。

css
1.tile_block{
2  border: 1px solid;
3  color:#000;
4  width: 300px;
5  margin-top: 50px;
6  padding: 30px;
7  text-align: center;
8}
9.tile_title{
10  font-size: 26px;
11}
12.tile_text{
13  font-size: 16px;
14}
15.tile_block__link{
16  display: block;
17  text-align: center;
18  color:#9e8435;
19}
20.fa-chevron-right{
21  padding-left: 5px;
22}
23.tile_block img {
24  margin-top: -100px; /* 画像サイズに応じて調整 */
25}