CSS3 рамки и изображения Retina

Question

Мой вопрос довольно прост, есть ли способ (или взлом) заставить свойство border-image поддерживать дисплеи Retina (высокая четкость)? По крайней мере, в браузерах на основе Webkit. Если я пытаюсь использовать изображение с высоким разрешением в рамке изображения, оно просто кажется больше, и я не нашел способа уменьшить его. Если бы я установил меньшую ширину границы и / или размер среза, он (естественно) обрезал изображение, а не уменьшал его. Я знаю, что могу смоделировать границу с фоном, но в этом вопросе мне больше интересно узнать, есть ли способ использовать 'border-image'. Заранее спасибо!

Это мой пример:

<style>
.border-button {
  border: 20px solid transparent;
  border-image: url(button-border.png) 20 20 repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-button {
    border: 10px solid transparent;
    border-image: url([e-mail]) 10 10 repeat;
  }
}
</style>

Answer 1

Это очень глупо с моей стороны, но я не пытался установить 'border-width' в половину размера фрагмента изображения границы. Он хорошо масштабирует изображение, и это правильный ответ. Я прошу прощения за то, что опубликовал вопрос, который настолько очевиден, но, возможно, он поможет тем, кто не видит этого очевидного перед ними, как я:)