/
index.md
64 lines (50 loc) · 2.12 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
---
title: "ResizeObserverEntry: borderBoxSize property"
short-title: borderBoxSize
slug: Web/API/ResizeObserverEntry/borderBoxSize
page-type: web-api-instance-property
browser-compat: api.ResizeObserverEntry.borderBoxSize
---
{{APIRef("Resize Observer API")}}
The **`borderBoxSize`** read-only property of
the {{domxref("ResizeObserverEntry")}} interface returns an array containing the new
border box size of the observed element when the callback is run.
## Value
An array containing objects with the new border box size of the observed element. The
array is necessary to support elements that have multiple fragments, which occur in
multi-column scenarios. Each object in the array contains two properties:
- `blockSize`
- : The length of the observed element's border box in the block dimension. For boxes
with a horizontal {{cssxref("writing-mode")}}, this is the vertical dimension, or
height; if the writing-mode is vertical, this is the horizontal dimension, or width.
- `inlineSize`
- : The length of the observed element's border box in the inline dimension. For boxes
with a horizontal {{cssxref("writing-mode")}}, this is the horizontal dimension, or
width; if the writing-mode is vertical, this is the vertical dimension, or height.
> **Note:** For more explanation of writing modes and block and inline
> dimensions, read [Handling different text directions](/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
## Examples
```js
const resizeObserver = new ResizeObserver((entries) => {
const calcBorderRadius = (size1, size2) =>
`${Math.min(100, size1 / 10 + size2 / 10)}px`;
for (const entry of entries) {
if (entry.borderBoxSize?.length > 0) {
entry.target.style.borderRadius = calcBorderRadius(
entry.borderBoxSize[0].inlineSize,
entry.borderBoxSize[0].blockSize,
);
} else {
entry.target.style.borderRadius = calcBorderRadius(
entry.contentRect.width,
entry.contentRect.height,
);
}
}
});
resizeObserver.observe(document.querySelector("div"));
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}