ボーダー色を背景色で隠したい

Question

前提・実現したいこと

青いボーダーがはみ出てしまっているので上手く隠す（なくす）方法を教えていただきたいです。

該当のソースコード

<div class="widget-inner-right">
    <div class="inner-top">
       <h2>ブログ</h2>
       <div class="more">
           <a href="#">more...</a>
       </div>
    </div>

.widget-inner-right {
      border: 1px solid #3F51B5; //青
      border-radius: 4px;
      
      .inner-top {
        background-color: #B53F6E; //赤
      }
    }

試したこと

.inner-topに赤いborderをつけたり、border自体にborder-top-colorで赤色をつけたりしましたが、上手く隠すことができません。
何か良い方法があれば教えていただきたいです。
よろしくお願い致します。
※下図のようにしたいです。

Comments

[s8_chu]

追記しました。ご確認ください。

Answer 1

overflow プロパティを用いることでパディング領域でボックスを切り取ることが可能です (動作確認用リンク)。

.widget-inner-right {
  border: 1px solid #3F51B5;
  border-radius: 4px;
  overflow: hidden; // 追記

  .inner-top {
    background-color: #B53F6E;
  }
}

Comments

[KengKeng]

迅速な対応ありがとうございます。
私の質問の仕方が悪かったです。
目標となる図を改めて質問欄に載せました。青いボーダーを隠したいのですが、良い方法はありませんでしょうか？
再度ご確認いただけると助かります。よろしくお願いいたします。

[s8_chu]

ネガティブマージンを用いてみてはいかがでしょうか？
https://jsfiddle.net/gjxb1q6d/
幅や高さが指定されているのであれば、絶対配置でも良いと思います。

[KengKeng]

ありがとうございます！解決しました。
translateくらいしかネガティブな考え方をしてこなかったので、非常に勉強になりました。
度々、質問に答えてくださり助かります。