CSS `<shape>`

Deprecated

Avoid using this feature in new projects. The CSS Masking specification deprecated the clip property. This feature may be a candidate for removal from web standards or browsers.

Consider using the following features instead: clip-path.

<shape> CSS clip

: <shape> rect() clip clip-path clip-path <basic-shape>

<shape> rect()

rect()

css

rect(top, right, bottom, left)

[]

top: <length>
right: <length>
bottom: <length>
left: <length>

<shape> toprightbottomleft

rect()

css

img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}


Cascading Style Sheets Level 2 # value-def-shape

CSS : clip

MDN

MDN 202655

GitHub

CSS
16. CSSOM
18. Custom highlight API
45. API
47. Round display
66. WebXR DOM overlays
67. Will change
3. SVG
Borders and box decorations
1. border-shape nav menu
5. :
6. :
CSSOM view
1. (API)
1. CSS
1. OpenType
3. WOFF
12. Grid lanes layout
2. object-view-box
3. z-index
4. z-index
5. z-index
Properties and Values API
1. CSS Houdini
2. CSS
1. Overview
3. Understanding timeline range names
3. :visited
4. :target
4. shape-outside
11. Contribute a recipe
1. -moz-*
  1. -moz-float-edge
  2. -moz-force-broken-image-icon
  3. -moz-orient
  4. -moz-user-focus
  5. -moz-user-input
2. -webkit-*
  1. -webkit-border-before
  2. -webkit-box-reflect
  3. -webkit-mask-box-image
  4. -webkit-mask-composite
  5. -webkit-mask-position-x
  6. -webkit-mask-position-y
  7. -webkit-mask-repeat-x
  8. -webkit-mask-repeat-y
  9. -webkit-tap-highlight-color
  10. -webkit-text-fill-color
  11. -webkit-text-security
  12. -webkit-text-stroke
  13. -webkit-text-stroke-color
  14. -webkit-text-stroke-width
  15. -webkit-touch-callout
3. (--*): CSS
4. accent-color
5. align-*
  1. align-content
  2. align-items
  3. align-self
6. alignment-baseline
7. all
8. anchor-name
9. anchor-scope
10. animation-*
  1. animation-composition
  2. animation-delay
  3. animation-direction
  4. animation-duration
  5. animation-fill-mode
  6. animation-iteration-count
  7. animation-name
  8. animation-play-state
  9. animation-range
  10. animation-range-end
  11. animation-range-start
  12. animation-timeline
  13. animation-timing-function
11. animation
12. appearance
13. aspect-ratio
14. backdrop-filter
15. backface-visibility
16. background-*
  1. background-attachment
  2. background-blend-mode
  3. background-clip
  4. background-color
  5. background-image
  6. background-origin
  7. background-position
  8. background-position-x
  9. background-position-y
  10. background-repeat
  11. background-repeat-x
  12. background-repeat-y
  13. background-size
17. background
18. baseline-shift
19. baseline-source
20. block-size
21. border-*
  1. border-block
  2. border-block-color
  3. border-block-end
  4. border-block-end-color
  5. border-block-end-style
  6. border-block-end-width
  7. border-block-start
  8. border-block-start-color
  9. border-block-start-style
  10. border-block-start-width
  11. border-block-style
  12. border-block-width
  13. border-bottom
  14. border-bottom-color
  15. border-bottom-left-radius
  16. border-bottom-right-radius
  17. border-bottom-style
  18. border-bottom-width
  19. border-collapse
  20. border-color
  21. border-end-end-radius
  22. border-end-start-radius
  23. border-image
  24. border-image-outset
  25. border-image-repeat
  26. border-image-slice
  27. border-image-source
  28. border-image-width
  29. border-inline
  30. border-inline-color
  31. border-inline-end
  32. border-inline-end-color
  33. border-inline-end-style
  34. border-inline-end-width
  35. border-inline-start
  36. border-inline-start-color
  37. border-inline-start-style
  38. border-inline-start-width
  39. border-inline-style
  40. border-inline-width
  41. border-left
  42. border-left-color
  43. border-left-style
  44. border-left-width
  45. border-radius
  46. border-right
  47. border-right-color
  48. border-right-style
  49. border-right-width
  50. border-shape
  51. border-spacing
  52. border-start-end-radius
  53. border-start-start-radius
  54. border-style
  55. border-top
  56. border-top-color
  57. border-top-left-radius
  58. border-top-right-radius
  59. border-top-style
  60. border-top-width
  61. border-width
22. border
23. bottom
24. box-*
  1. box-align
  2. box-decoration-break
  3. box-direction
  4. box-flex
  5. box-flex-group
  6. box-lines
  7. box-ordinal-group
  8. box-orient
  9. box-pack
  10. box-shadow
  11. box-sizing
25. break-*
  1. break-after
  2. break-before
  3. break-inside
26. caption-side
27. caret-*
  1. caret-animation
  2. caret-color
  3. caret-shape
28. caret
29. clear
30. clip-path
31. clip-rule
32. clip
33. color-*
  1. color-interpolation
  2. color-interpolation-filters
  3. color-scheme
34. color
35. column-*
  1. column-count
  2. column-fill
  3. column-gap
  4. column-height
  5. column-rule
  6. column-rule-break
  7. column-rule-color
  8. column-rule-style
  9. column-rule-visibility-items
  10. column-rule-width
  11. column-span
  12. column-width
  13. column-wrap
36. columns
37. contain-*
  1. contain-intrinsic-block-size
  2. contain-intrinsic-height
  3. contain-intrinsic-inline-size
  4. contain-intrinsic-size
  5. contain-intrinsic-width
38. contain
39. container-name
40. container-type
41. container
42. content-visibility
43. content
44. corner-*
  1. corner-block-end-shape
  2. corner-block-start-shape
  3. corner-bottom-left-shape
  4. corner-bottom-right-shape
  5. corner-bottom-shape
  6. corner-end-end-shape
  7. corner-end-start-shape
  8. corner-inline-end-shape
  9. corner-inline-start-shape
  10. corner-left-shape
  11. corner-right-shape
  12. corner-shape
  13. corner-start-end-shape
  14. corner-start-start-shape
  15. corner-top-left-shape
  16. corner-top-right-shape
  17. corner-top-shape
45. counter-*
  1. counter-increment
  2. counter-reset
  3. counter-set
46. cursor
47. cx
48. cy
49. d
50. direction
51. display
52. dominant-baseline
53. dynamic-range-limit
54. empty-cells
55. field-sizing
56. fill-opacity
57. fill-rule
58. fill
59. filter
60. flex-*
  1. flex-basis
  2. flex-direction
  3. flex-flow
  4. flex-grow
  5. flex-line-count
  6. flex-shrink
  7. flex-wrap
61. flex
62. float
63. flood-color
64. flood-opacity
65. font-*
  1. font-family
  2. font-feature-settings
  3. font-kerning
  4. font-language-override
  5. font-optical-sizing
  6. font-palette
  7. font-size
  8. font-size-adjust
  9. font-smooth
  10. font-stretch
  11. font-style
  12. font-synthesis
  13. font-synthesis-position
  14. font-synthesis-small-caps
  15. font-synthesis-style
  16. font-synthesis-weight
  17. font-variant
  18. font-variant-alternates
  19. font-variant-caps
  20. font-variant-east-asian
  21. font-variant-emoji
  22. font-variant-ligatures
  23. font-variant-numeric
  24. font-variant-position
  25. font-variation-settings
  26. font-weight
  27. font-width
66. font
67. forced-color-adjust
68. frame-sizing
69. gap
70. grid-*
  1. grid-area
  2. grid-auto-columns
  3. grid-auto-flow
  4. grid-auto-rows
  5. grid-column
  6. grid-column-end
  7. grid-column-start
  8. grid-row
  9. grid-row-end
  10. grid-row-start
  11. grid-template
  12. grid-template-areas
  13. grid-template-columns
  14. grid-template-rows
71. grid
72. hanging-punctuation
73. height
74. hyphenate-character
75. hyphenate-limit-chars
76. hyphens
77. image-*
  1. image-orientation
  2. image-rendering
  3. image-resolution
78. initial-letter
79. inline-size
80. inset-*
  1. inset-block
  2. inset-block-end
  3. inset-block-start
  4. inset-inline
  5. inset-inline-end
  6. inset-inline-start
81. inset
82. interactivity
83. interest-*
  1. interest-delay
  2. interest-delay-end
  3. interest-delay-start
84. interpolate-size
85. isolation
86. justify-*
  1. justify-content
  2. justify-items
  3. justify-self
87. left
88. letter-spacing
89. lighting-color
90. line-*
  1. line-break
  2. line-clamp
  3. line-height
  4. line-height-step
91. link-parameters
92. list-*
  1. list-style
  2. list-style-image
  3. list-style-position
  4. list-style-type
93. margin-*
  1. margin-block
  2. margin-block-end
  3. margin-block-start
  4. margin-bottom
  5. margin-inline
  6. margin-inline-end
  7. margin-inline-start
  8. margin-left
  9. margin-right
  10. margin-top
  11. margin-trim
94. margin
95. marker-*
  1. marker-end
  2. marker-mid
  3. marker-start
96. marker
97. mask-*
  1. mask-border
  2. mask-border-mode
  3. mask-border-outset
  4. mask-border-repeat
  5. mask-border-slice
  6. mask-border-source
  7. mask-border-width
  8. mask-clip
  9. mask-composite
  10. mask-image
  11. mask-mode
  12. mask-origin
  13. mask-position
  14. mask-repeat
  15. mask-size
  16. mask-type
98. mask
99. math-*
  1. math-depth
  2. math-shift
  3. math-style
100. max-*
  1. max-block-size
  2. max-height
  3. max-inline-size
  4. max-width
101. min-*
  1. min-block-size
  2. min-height
  3. min-inline-size
  4. min-width
102. mix-blend-mode
103. object-*
  1. object-fit
  2. object-position
  3. object-view-box
104. offset-*
  1. offset-anchor
  2. offset-distance
  3. offset-path
  4. offset-position
  5. offset-rotate
105. offset
106. opacity
107. order
108. orphans
109. outline-*
  1. outline-color
  2. outline-offset
  3. outline-style
  4. outline-width
110. outline
111. overflow-*
  1. overflow-anchor
  2. overflow-block
  3. overflow-clip-margin
  4. overflow-inline
  5. overflow-wrap
  6. overflow-x
  7. overflow-y
112. overflow
113. overlay
114. overscroll-*
  1. overscroll-behavior
  2. overscroll-behavior-block
  3. overscroll-behavior-inline
  4. overscroll-behavior-x
  5. overscroll-behavior-y
115. padding-*
  1. padding-block
  2. padding-block-end
  3. padding-block-start
  4. padding-bottom
  5. padding-inline
  6. padding-inline-end
  7. padding-inline-start
  8. padding-left
  9. padding-right
  10. padding-top
116. padding
117. page-*
  1. page-break-after
  2. page-break-before
  3. page-break-inside
118. page
119. paint-order
120. path-length
121. perspective-origin
122. perspective
123. place-*
  1. place-content
  2. place-items
  3. place-self
124. pointer-events
125. position-*
  1. position-anchor
  2. position-area
  3. position-try
  4. position-try-fallbacks
  5. position-try-order
  6. position-visibility
126. position
127. print-color-adjust
128. quotes
129. r
130. reading-flow
131. reading-order
132. resize
133. right
134. rotate
135. row-*
  1. row-gap
  2. row-rule
  3. row-rule-break
  4. row-rule-color
  5. row-rule-style
  6. row-rule-visibility-items
  7. row-rule-width
136. ruby-*
  1. ruby-align
  2. ruby-overhang
  3. ruby-position
137. rule-*
  1. rule-break
  2. rule-color
  3. rule-style
  4. rule-visibility-items
  5. rule-width
138. rule
139. rx
140. ry
141. scale
142. scroll-*
  1. scroll-behavior
  2. scroll-initial-target
  3. scroll-margin
  4. scroll-margin-block
  5. scroll-margin-block-end
  6. scroll-margin-block-start
  7. scroll-margin-bottom
  8. scroll-margin-inline
  9. scroll-margin-inline-end
  10. scroll-margin-inline-start
  11. scroll-margin-left
  12. scroll-margin-right
  13. scroll-margin-top
  14. scroll-marker-group
  15. scroll-padding
  16. scroll-padding-block
  17. scroll-padding-block-end
  18. scroll-padding-block-start
  19. scroll-padding-bottom
  20. scroll-padding-inline
  21. scroll-padding-inline-end
  22. scroll-padding-inline-start
  23. scroll-padding-left
  24. scroll-padding-right
  25. scroll-padding-top
  26. scroll-snap-align
  27. scroll-snap-stop
  28. scroll-snap-type
  29. scroll-target-group
  30. scroll-timeline
  31. scroll-timeline-axis
  32. scroll-timeline-name
143. scrollbar-*
  1. scrollbar-color
  2. scrollbar-gutter
  3. scrollbar-width
144. shape-*
  1. shape-image-threshold
  2. shape-margin
  3. shape-outside
  4. shape-rendering
145. speak-as
146. stop-color
147. stop-opacity
148. stroke-*
  1. stroke-dasharray
  2. stroke-dashoffset
  3. stroke-linecap
  4. stroke-linejoin
  5. stroke-miterlimit
  6. stroke-opacity
  7. stroke-width
149. stroke
150. tab-size
151. table-layout
152. text-*
  1. text-align
  2. text-align-last
  3. text-anchor
  4. text-autospace
  5. text-box
  6. text-box-edge
  7. text-box-trim
  8. text-combine-upright
  9. text-decoration
  10. text-decoration-color
  11. text-decoration-inset
  12. text-decoration-line
  13. text-decoration-skip
  14. text-decoration-skip-ink
  15. text-decoration-style
  16. text-decoration-thickness
  17. text-emphasis
  18. text-emphasis-color
  19. text-emphasis-position
  20. text-emphasis-style
  21. text-indent
  22. text-justify
  23. text-orientation
  24. text-overflow
  25. text-rendering
  26. text-shadow
  27. text-size-adjust
  28. text-spacing-trim
  29. text-transform
  30. text-underline-offset
  31. text-underline-position
  32. text-wrap
  33. text-wrap-mode
  34. text-wrap-style
153. timeline-scope
154. top
155. touch-action
156. transform-*
  1. transform-box
  2. transform-origin
  3. transform-style
157. transform
158. transition-*
  1. transition-behavior
  2. transition-delay
  3. transition-duration
  4. transition-property
  5. transition-timing-function
159. transition
160. translate
161. unicode-bidi
162. user-modify
163. user-select
164. vector-effect
165. vertical-align
166. view-*
  1. view-timeline
  2. view-timeline-axis
  3. view-timeline-inset
  4. view-timeline-name
  5. view-transition-class
  6. view-transition-name
  7. view-transition-scope
167. visibility
168. white-space
169. white-space-collapse
170. widows
171. width
172. will-change
173. word-break
174. word-spacing
175. writing-mode
176. x
177. y
178. z-index
179. zoom
1. &
4. ID
1. :-moz-*
  1. :-moz-broken
  2. :-moz-drag-over
  3. :-moz-first-node
  4. :-moz-handler-blocked
  5. :-moz-handler-crashed
  6. :-moz-handler-disabled
  7. :-moz-last-node
  8. :-moz-loading
  9. :-moz-locale-dir(ltr)
  10. :-moz-locale-dir(rtl)
  11. :-moz-only-whitespace
  12. :-moz-submit-invalid
  13. :-moz-suppressed
  14. :-moz-user-disabled
  15. :-moz-window-inactive
2. :active-view-transition
3. :active-view-transition-type()
4. :active
5. :any-link
6. :autofill
7. :blank
8. :buffering
9. :checked
10. :current
11. :default
12. :defined
13. :dir()
14. :disabled
15. :empty
16. :enabled
17. :first-child
18. :first-of-type
19. :first
20. :focus-visible
21. :focus-within
22. :focus
23. :fullscreen
24. :future
25. :has-slotted
26. :has()
27. :heading
28. :heading()
29. :host-context()
30. :host
31. :host()
32. :hover
33. :in-range
34. :indeterminate
35. :interest-source
36. :interest-target
37. :invalid
38. :is()
39. :lang()
40. :last-child
41. :last-of-type
42. :left
43. :link
44. :local-link
45. :modal
46. :muted
47. :not()
48. :nth-*
  1. :nth-child()
  2. :nth-last-child()
  3. :nth-last-of-type()
  4. :nth-of-type()
49. :only-child
50. :only-of-type
51. :open
52. :optional
53. :out-of-range
54. :past
55. :paused
56. :picture-in-picture
57. :placeholder-shown
58. :playing
59. :popover-open
60. :read-only
61. :read-write
62. :required
63. :right
64. :root
65. :scope
66. :seeking
67. :stalled
68. :state()
69. :target-*
  1. :target-after
  2. :target-before
  3. :target-current
70. :target
71. :user-invalid
72. :user-valid
73. :valid
74. :visited
75. :volume-locked
76. :where()
77. :xr-overlay
1. ::-moz-*
  1. ::-moz-color-swatch
  2. ::-moz-focus-inner
  3. ::-moz-list-bullet
  4. ::-moz-list-number
  5. ::-moz-meter-bar
  6. ::-moz-progress-bar
  7. ::-moz-range-progress
  8. ::-moz-range-thumb
  9. ::-moz-range-track
2. ::-webkit-*
  1. ::-webkit-inner-spin-button
  2. ::-webkit-meter-bar
  3. ::-webkit-meter-even-less-good-value
  4. ::-webkit-meter-inner-element
  5. ::-webkit-meter-optimum-value
  6. ::-webkit-meter-suboptimum-value
  7. ::-webkit-progress-bar
  8. ::-webkit-progress-inner-element
  9. ::-webkit-progress-value
  10. ::-webkit-scrollbar
  11. ::-webkit-search-cancel-button
  12. ::-webkit-search-results-button
  13. ::-webkit-slider-runnable-track
  14. ::-webkit-slider-thumb
3. ::after
4. ::backdrop
5. ::before
6. ::checkmark
7. ::column
8. ::cue
9. ::details-content
10. ::file-selector-button
11. ::first-letter
12. ::first-line
13. ::grammar-error
14. ::highlight()
15. ::marker
16. ::part()
17. ::picker-icon
18. ::picker()
19. ::placeholder
20. ::scroll-*
  1. ::scroll-button()
  2. ::scroll-marker
  3. ::scroll-marker-group
21. ::search-text
22. ::selection
23. ::slotted()
24. ::spelling-error
25. ::target-text
26. ::view-*
  1. ::view-transition
  2. ::view-transition-group()
  3. ::view-transition-image-pair()
  4. ::view-transition-new()
  5. ::view-transition-old()
1. @charset
2. @color-profile
3. @container
4. @counter-style
  1. additive-symbols
  2. fallback
  3. negative
  4. pad
  5. prefix
  6. range
  7. speak-as
  8. suffix
  9. symbols
  10. system
5. @custom-media
6. @document
7. @font-face
  1. ascent-override
  2. descent-override
  3. font-display
  4. font-family
  5. font-feature-settings
  6. font-stretch
  7. font-style
  8. font-variation-settings
  9. font-weight
  10. font-width
  11. line-gap-override
  12. size-adjust
  13. src
  14. unicode-range
8. @font-feature-values
  1. font-display
9. @font-palette-values
  1. base-palette
  2. font-family
  3. override-colors
10. @function
11. @import
12. @keyframes
13. @layer
14. @media
  1. -moz-device-pixel-ratio
  2. -webkit-animation
  3. -webkit-device-pixel-ratio
  4. -webkit-transform-2d
  5. -webkit-transform-3d
  6. -webkit-transition
  7. any-hover
  8. any-pointer
  9. aspect-ratio
  10. color
  11. color-gamut
  12. color-index
  13. device-aspect-ratio
  14. device-height
  15. device-posture
  16. device-width
  17. display-mode
  18. dynamic-range
  19. forced-colors
  20. grid
  21. height
  22. horizontal-viewport-segments
  23. hover
  24. inverted-colors
  25. monochrome
  26. orientation
  27. overflow-block
  28. overflow-inline
  29. pointer
  30. prefers-color-scheme
  31. prefers-contrast
  32. prefers-reduced-data
  33. prefers-reduced-motion
  34. prefers-reduced-transparency
  35. resolution
  36. scan
  37. scripting
  38. shape
  39. update
  40. vertical-viewport-segments
  41. video-dynamic-range
  42. width
15. @namespace
16. @page
  1. page-orientation
  2. size
17. @position-try
18. @property
  1. inherits
  2. initial-value
  3. syntax
19. @scope
20. @starting-style
21. @supports
22. @view-transition
1. !important
2. fit-content
3. inherit
4. initial
5. max-content
6. min-content
7. revert
8. revert-layer
9. revert-rule
10. unset
1. <absolute-size>
2. <alpha-value>
3. <angle-percentage>
4. <angle>
5. <axis>
6. <baseline-position>
7. <basic-shape>
8. <blend-mode>
9. <box-edge>
10. <calc-keyword>
11. <calc-sum>
12. <color-interpolation-method>
13. <color>
14. <content-distribution>
15. <content-position>
16. <corner-shape-value>
17. <custom-ident>
18. <dashed-function>
19. <dashed-ident>
20. <dimension>
21. <display-box>
22. <display-inside>
23. <display-internal>
24. <display-legacy>
25. <display-listitem>
26. <display-outside>
27. <easing-function>
28. <filter-function>
29. <flex>
30. <frequency-percentage>
31. <frequency>
32. <generic-family>
33. <gradient>
34. <hex-color>
35. <hue-interpolation-method>
36. <hue>
37. <ident>
38. <image>
39. <integer>
40. <length-percentage>
41. <length>
42. <line-style>
43. <line-width>
44. <named-color>
45. <number>
46. <overflow-position>
47. <overflow>
48. <percentage>
49. <position-area>
50. <position>
51. <ratio>
52. <relative-size>
53. <resolution>
54. <rule-list>
55. <self-position>
56. <shape>
57. <string>
58. <system-color>
59. <text-edge>
60. <time-percentage>
61. <time>
62. <timeline-range-name>
63. <transform-function>
64. <url>
1. -moz-image-rect
2. abs()
3. acos()
4. alpha()
5. anchor-size()
6. anchor()
7. asin()
8. atan()
9. atan2()
10. attr()
11. blur()
12. brightness()
13. calc-size()
14. calc()
15. circle()
16. clamp()
17. color-mix()
18. color()
19. conic-gradient()
20. contrast-color()
21. contrast()
22. cos()
23. counter()
24. counters()
25. cross-fade()
26. cubic-bezier()
27. device-cmyk()
28. drop-shadow()
29. dynamic-range-limit-mix()
30. element()
31. ellipse()
32. env()
33. exp()
34. fit-content()
35. grayscale()
36. hsl()
37. hue-rotate()
38. hwb()
39. hypot()
40. if()
41. image-set()
42. image()
43. inset()
44. invert()
45. lab()
46. lch()
47. light-dark()
48. linear-gradient()
49. linear()
50. log()
51. matrix()
52. matrix3d()
53. max()
54. min()
55. minmax()
56. mod()
57. oklab()
58. oklch()
59. opacity()
60. paint()
61. param()
62. path()
63. perspective()
64. polygon()
65. pow()
66. progress()
67. radial-gradient()
68. random()
69. ray()
70. rect()
71. rem()
72. repeat()
73. repeating-conic-gradient()
74. repeating-linear-gradient()
75. repeating-radial-gradient()
76. rgb()
77. rotate()
78. rotate3d()
79. rotateX()
80. rotateY()
81. rotateZ()
82. round()
83. saturate()
84. scale()
85. scale3d()
86. scaleX()
87. scaleY()
88. scaleZ()
89. sepia()
90. shape()
91. sibling-count()
92. sibling-index()
93. sign()
94. sin()
95. skew()
96. skewX()
97. skewY()
98. sqrt()
99. steps()
100. superellipse()
101. symbols()
102. tan()
103. translate()
104. translate3d()
105. translateX()
106. translateY()
107. translateZ()
108. type()
109. url()
110. var()
111. xywh()

CSS <shape>

rect()

MDN

CSS `<shape>`