styleditor.net styleditor.net styleditor.net styleditor.net English accent-coloralignalignment-baselineallanchoranimationappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbaselineblock-sizeborderbottomboxbreakcaption-sidecaretclearclipcolorcolumncolumnscontaincontainercontentcornercorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shapecorner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shapecountercursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfillfilterflexfloatfloodfontforced-color-adjustgapgridheighthyphenatehyphensimageime-modeinitial-letterinline-sizeinsetinteractivityinterestinterpolate-sizeisolationjustifyleftletter-spacinglighting-colorlinelistmarginmarkermaskmathmaxminmix-blend-modeobjectoffsetopacityorderorphansoutlineoverflowoverlayoverscrollpaddingpagepaint-orderperspectiveplacepointer-eventspositionprint-color-adjustquotesrreadingresizerightrotaterowrubyrulerxryscalescrollscrollbarshapespeakstopstroketab-sizetable-layouttexttimelinetoptouch-actiontransformtransitiontranslatetrigger-scopeunicode-bidiuser-selectvector-effectvertical-alignviewvisibilitywhitewidowswidthwill-changewordwriting-modexyz-indexzoom

The CSS Propertie corner-top-left-shape

מאפיין corner-top-left-shape קובע את צורת הפינה הימנית-עליונה (במצב כתיבה LTR) או השמאלית-עליונה (במצב RTL) של תיבה, בתוך אזור ה-border-radius. מאפשר ליצור פינות superellipse מותאמות — מ-round רגיל ועד notch קוצני.
.card { corner-top-left-shape: squircle; } .badge { corner-top-left-shape: superellipse(3); border-radius: 16px; }
roundצורת רבע של אליפסה convex (קמורה). שקול ל-superellipse(1). זו ברירת המחדל וההתנהגות הקלאסית של border-radius.squircleצורה בין round ל-square — עקומה convex מתונה. שקול ל-superellipse(2). מתאים לאייקונים בסגנון iOS.squareזווית convex של 90deg. שקול ל-superellipse(infinity). מראה זהה לפינה חדה רגילה אך אפשר לאנימציה.bevelקו אלכסוני ישר — לא convex ולא concave. שקול ל-superellipse(0).scoopצורת רבע של אליפסה concave (קעורה — "חתוכה פנימה"). שקול ל-superellipse(-1).notchזווית concave של 90deg — חיתוך קוצני פנימה. שקול ל-superellipse(-infinity). superellipse()פונקציה מותאמת — מקבלת מספר K (או infinity / -infinity). הצורה היא רבע של superellipse עם מעריך 2^K. K חיובי = convex, K שלילי = concave. CSS Borders and Box Decorations Module Level 4 Editor's Draft W3CMDN
Show all code ערוך CSS און-ליין התוסף שזוכר עבורך מאות פריטי CSS כל פרופרטי CSS — בהדגמה חיה מקור הייחוס הדו-לשוני ל-CSS
הגדרהדוגמאותתחבירמודולמפרטמקורות מידעהדגמה חזותית