Как округлить рамку в css
Перейти к содержимому

Как округлить рамку в css

  • автор:

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

При таком построении градиента не получается округлить, что сделать надо?

  • Вопрос задан более трёх лет назад
  • 3053 просмотра

Комментировать

Решения вопроса 2

К сожалению сделать закругление border-image невозможно.

Как вариант, можно блок с border-image обернуть в div, а div’у задать нужное округление и overflow: hidden;

Ответ написан более трёх лет назад

Нравится 4 1 комментарий

round border css

Пример round border

Мой вопрос: Возможно ли сделать средствами CSS данный блок(интересует круглый border): Пожалуйста, обратите внимание, синий круг над серым. Мой вариант: я сделал, но с помощью картинки:

.number < position: relative; width: 105px; height: 105px; text-align: center; display: block; margin-left: auto; margin-right: auto; margin-top: 30px; >.number.number_img:before < content: ''; position: absolute; right: -2px; top: -2px; width: 100%; height: 100%; display: block; background-image: url(https://erweb.ru/wp-content/uploads/2017/08/circles-1.png); background-repeat: no-repeat; background-position: top right; z-index: 2; >.number .number__value

Пример round border

1). Ваш вариант должен иметь возможность настройки на любую длину синего круга, чтобы можно было получить и такой: 2). Данный блок не подразумевает какую-либо анимацию, решение на CSS должно быть.
3). Скругление концов полуокружности не обязательная часть, интересует только корректное наложение одного круга над другим, с возможностью ставить произвольно длину синего круга.

border-image

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017 .

The border-image CSS property draws an image around a given element. It replaces the element’s regular border.

Try it

Note: You should specify a separate border-style in case the border image fails to load. Although the specification doesn’t strictly require it, some browsers don’t render the border image if border-style is none or border-width is 0 .

Constituent properties

This property is a shorthand for the following CSS properties:

  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width

Syntax

/* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; /* Global values */ border-image: inherit; border-image: initial; border-image: revert; border-image: revert-layer; border-image: unset; 

The border-image property may be specified with anywhere from one to five of the values listed below.

Note: If the computed value of border-image-source is none , or if the image cannot be displayed, the border-style will be displayed instead.

Values

The dimensions for slicing the source image into regions. Up to four values may be specified. See border-image-slice .

The width of the border image. Up to four values may be specified. See border-image-width .

The distance of the border image from the element’s outside edge. Up to four values may be specified. See border-image-outset .

Defines how the edge regions of the source image are adjusted to fit the dimensions of the border image. Up to two values may be specified. See border-image-repeat .

Accessibility concerns

Assistive technology cannot parse border images. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

  • MDN Understanding WCAG, Guideline 1.1 explanations
  • Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0

Formal definition

  • border-image-source : none
  • border-image-slice : 100%
  • border-image-width : 1
  • border-image-outset : 0
  • border-image-repeat : stretch
  • border-image-slice : refer to the size of the border image
  • border-image-width : refer to the width or height of the border image area
  • border-image-outset : as specified, but with relative lengths converted into absolute lengths
  • border-image-repeat : as specified
  • border-image-slice : one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified
  • border-image-source : none or the image with its URI made absolute
  • border-image-width : as specified, but with relative lengths converted into absolute lengths
  • border-image-outset : by computed value type
  • border-image-repeat : discrete
  • border-image-slice : by computed value type
  • border-image-source : discrete
  • border-image-width : by computed value type

Formal syntax

Examples

Bitmap

In this example, we will apply a diamond pattern to an element’s borders. The source for the border image is a «.png» file of 81 by 81 pixels, with three diamonds going vertically and horizontally:

HTML
div id="bitmap"> This element is surrounded by a bitmap-based border image! div> 
CSS

To match the size of a single diamond, we will use a value of 81 divided by 3, or 27 , for slicing the image into corner and edge regions. To center the border image on the edge of the element’s background, we will make the outset values equal to half of the width values. Finally, a repeat value of round will make the border slices fit evenly, i.e., without clipping or gaps.

#bitmap  width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px round; > 

border-width

CSS-свойство border-width определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства border .

  • border-top-width (en-US): medium
  • border-right-width (en-US): medium
  • border-bottom-width (en-US): medium
  • border-left-width (en-US): medium
  • border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
  • border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
  • border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
  • border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
  • border-bottom-width (en-US): длина
  • border-left-width (en-US): длина
  • border-right-width (en-US): длина
  • border-top-width (en-US): длина

Синтаксис

border-width =
(en-US)

=
| (en-US)
thin | (en-US)
medium | (en-US)
thick

border-width: ширина /* Одно значение */ border-width: вертикальная горизонтальная /* Два значения */ border-width: верх горизонтальная основание /* Три значения */ border-width: верх право основание лево /* Четыре значения */ border-width: inherit /* Родительское значение */ 

Values

Примечание: The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.

Is a keyword indicating that all four values are inherited from their parent’s element calculated value.

Examples

A mix of values and lengths

HTML
p id="sval">one value: 6px wide border on all 4 sidesp> p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border p> p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left p> p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em right p> 
CSS
#sval  border: ridge #ccc; border-width: 6px; > #bival  border: solid red; border-width: 2px 10px; > #treval  border: dotted orange; border-width: 0.3em 0 9px; > #fourval  border: solid lightgreen; border-width: thin medium thick 1em; > p  width: auto; margin: 0.25em; padding: 0.25em; > 
Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-width

Совместимость с браузерами

BCD tables only load in the browser

See also

  • The border-related shorthand properties: border , border-style (en-US), border-color (en-US)
  • The border-width-related properties: border-bottom-width (en-US), border-left-width (en-US), border-right-width (en-US), border-top-width (en-US)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 13 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *