Html CSS边框图像显示模糊

我有下面的图像，我正试图设置为一个图像边框（我添加了红色只是为了让你能正确地看到它-真实的版本是用透明背景修剪的）

尺寸：363 x 10

我正在尝试将其设置为顶部边框的边框图像（暂时）：

如果我设置

边框图像切片：15%顶部边框的一般形状看起来正确（我认为），但看起来非常模糊：

有人知道这是为什么吗？最初，我将
边框图像切片
保留在外，但图像仅显示在角落中。。。玩了不同的游戏，但没有一个能给我正确的结果

.panel { 
  background: #fff; 
  background: none; 
  border-radius: 0; 
  border-width: 10px; 
  border-style: solid; 
  border-image: url('../image/marker-white-01-reversed.png'); 
  border-image-slice: 15%; 
}

看看你的代码。。
半径为0，图像切片为15%，实心边框。。
那就是你必须有这样一个图像。
你想要达到什么效果？@ErenTantekin我基本上只是想让上边框看起来像第一个图像（图像文件中的一个）
.panel { 
  background: #fff; 
  background: none; 
  border-radius: 0; 
  border-width: 10px; 
  border-style: solid; 
  border-image: url('../image/marker-white-01-reversed.png'); 
  border-image-slice: 15%; 
}