Как сделать рамки в css не на полную ширину?

Question

[Аминнулла Гаджиев]

В общем, учусь делать сайты, и вот захотел вдруг сделать рамку не на полную ширину блока, а лишь на часть. Как мне это сделать и как разместить его по середине?

Answer 1

[Олег]

Answer 2

[Алексей Ярков]

<div class="container"></div>

.container {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #c4c4c4;
}

.container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 250px;
  border-top: 3px solid #00ff00;
  border-right: 3px solid #00ff00;
}

Answer 3

[Mike]

В один блок (например 500 px) вставить 2 блока по 250px, и у первого из них сделать бордюр по правой стороне. Если я вас правильно понял.

Answer 4

[Икотий Айтишевич]

Прочитать про рамки можно тут: https://developer.mozilla.org/ru/docs/Web/CSS/border и про рамки с разных сторон смотрите свойства border-left, border-right, border-bottom и border-top.

Но если Вам надо 50% процентов блока покрыть рамкой, то лучше использовать border-image-source и border-image-slice. Подробнее тут: https://developer.mozilla.org/en-US/docs/Web/CSS/b...
А чтобы отцентровать содержимое читайте тут: https://developer.mozilla.org/en-US/docs/Web/CSS/j...