Чтобы создать бордер (рамку) без использования SVG, можно использовать CSS. Вот несколько способов, как это можно сделать:
### 1. Обычный бордер
Простой способ создать бордер — использовать свойство `border` в CSS.
```html
<div class="border-box">Содержимое</div>
```
```css
.border-box {
border: 2px solid black; /* Толщина, стиль и цвет бордера */
padding: 20px; /* Отступы внутри рамки */
margin: 10px; /* Отступы снаружи рамки */
}
```
### 2. Бордер с закругленными углами
Чтобы сделать бордер с закругленными углами, используйте свойство `border-radius`.
```css
.border-box {
border: 2px solid black;
border-radius: 10px; /* Закругление углов */
padding: 20px;
}
```
### 3. Использование псевдоэлементов
Если нужно создать более сложный бордер, можно использовать псевдоэлементы `::before` и `::after`.
```html
<div class="border-box">Содержимое</div>
```
```css
.border-box {
position: relative;
padding: 20px;
}
.border-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid black; /* стиль бордера */
border-radius: 10px; /* закругление углов */
z-index: -1; /* помещаем за содержимым */
}
```
### 4. Использование градиента
Если вам нужен более креативный бордер, вы можете использовать градиенты.
```html
<div class="gradient-border">Содержимое</div>
```
```css
.gradient-border {
position: relative;
padding: 20px;
background: white; /* Цвет фона */
}
.gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, red, blue);
z-index: -1;
border-radius: 10px;
padding: 2px; /* Толщина бордера */
margin: -2px; /* Отрицательный отступ, чтобы "раздвинуть" бордер */
}
```
Каждый из этих методов позволяет создавать стилизованные рамки без необходимости использовать SVG. Выберите тот, который лучше всего подходит для вашего проекта!