いきさつ

あれ？これってできないんですね・・汗

border: 1px solid rgba(255, 0, 0, 0.5);

どうしたらできる？

答え background-clip: padding-boxを使いましょう！！

example

div {
  border: 1px solid rgba(255, 0, 0, 0.5);
  background-clip: padding-box;
}

解説

background-clipのデフォルト値はborder-boxなので padding-boxにすることでうまくいきます。

参考

https://stackoverflow.com/questions/4062001/css3-border-opacity