これらのチャートの周りに白い四角形を表示するにはどうすればよいですか？

Question

これらの矩形内に囲まれたダッシュボードとチャートの要素のように見えるように、これらのグラフの周りに矩形の境界ブロックが必要です。

すべてが日食です。 htmlコード：

<div class="col-md-12"> 
    <h3> Students with Activity in Course (Bar Chart)</h3> 
     <div class="bor"> 
     <canvas id="scooby" width="400" height="100"></canvas>  
</div> 
    <h3> Students with Activity in Course (Line Chart) </h3> 
    <div> 
     <canvas id="freddy" width="400" height="100"></canvas> 
    </div> 
    <h3> Students with Activity in Course</h3> 
    <div> 
     <canvas id="velma" width="400" height="100"></canvas> 
    </div> 
</div> 

CSS：

.bor { 
    width: 300px; 
    height: 100px; 
    padding: 50px; 
    border: 1px solid red; 
} 

Answer 1

あなたのマークアップを見ることなく、私はいくつかの仮定を行うと、暗闇の中で刺しかかります。ボーダーを付けて<div>にあなたのチャートをネストしようとしましたか？

HTML

<div class="border-block"> <!-- your chart here --> </div>

CSS

.border-block { border: 3px solid #000; padding: 5px; }