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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

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


HTML:

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


CSS:

1
2
3
4
5
6
7
8
.text {
    text-align: center;
    width: 50px;
    border: 5px solid #768576;
    border-radius: 50% 50%;
    padding:50px;
    margin: 20px;
}


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

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

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

1
2
3
4
.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


Например:

1
2
3
4
5
6
7
.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 (пиксели).