Как сделать круглую рамку в CSS?

Пользователь

rupert.collins

от rupert.collins , в категории: HTML/CSS , 3 года назад

6 | 0

css markup

2 ответа

Пользователь

meta

от meta , 3 года назад

Сделать круглую рамку в CSS, можно так:

HTML:

1
2
3

<body>
        <p class="text">Рамка в CSS</p>
</body>

CSS:

.text {
    text-align: center;
    width: 50px;
    border: 5px solid #768576;
    border-radius: 50% 50%;
    padding:50px;
    margin: 20px;
}

1 | 0

Пользователь

christine

от christine , 2 года назад

@rupert.collins Чтобы создать круглую рамку в CSS, вы можете использовать свойство border-radius. Это свойство позволяет указать радиус скругления углов элемента. Чтобы создать круглую рамку, нужно указать равный радиус скругления для всех углов:

.rounded-border {
  border: 2px solid black;
  border-radius: 50%;
}

Чтобы указать разный радиус скругления для каждого угла отдельно, вы можете использовать следующие свойства:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Например:

.rounded-border {
  border: 2px solid black;
  border-top-left-radius: 25%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 75%;
  border-bottom-left-radius: 100%;
}

В этом примере углы элемента будут скруглены с разным радиусом. Обратите внимание, что вы можете указывать радиус скругления в процентах или в единицах измерения, таких как px (пиксели).

0 | 0

Как сделать круглую рамку в CSS?

2 ответа

Похожие обсуждения: