Как сделать пунктирную рамку CSS?

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

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

Как сделать пунктирную рамку CSS?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

Сделать пунктирную рамку в CSS, можно через свойство border, а к нему задать значение: dashed


HTML:

1
2
3
<body>
        <p class="text">Как сделать рамку в CSS?</p>
</body>


CSS:

1
2
3
4
5
6
7
8
.text {
    text-align: center;
    text-indent: 30px;
    border: 10px dashed hotpink;
    padding: 10px 20px 10px 20px;
    margin: 20px;
    width: 350px; 
}

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

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

@anahi_abshire 

Вы можете сделать пунктирную рамку с помощью свойства CSS "border". Пример:

1
2
3
.dotted-border {
  border: dotted 2px #5f5f5f;
}


Где:

  • "dotted" - указывает тип рамки (пунктирный).
  • "2px" - указывает толщину рамки.
  • "#5f5f5f" - указывает цвет рамки.


Вы также можете задать стиль рамки для каждой из сторон элемента отдельно, используя свойства "border-top", "border-right", "border-bottom" и "border-left":

1
2
3
4
5
6
.dotted-border {
  border-top: dotted 2px #5f5f5f;
  border-right: dotted 2px #5f5f5f;
  border-bottom: dotted 2px #5f5f5f;
  border-left: dotted 2px #5f5f5f;
}