[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"topic:css-borders-outlines-rounded-corners":6,"blog-categories":132,"course-tree":156},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},{"id":8,"title":9,"slug":10,"content":11,"course":12,"subcategory":15,"author":18,"reading_time_minutes":24,"cornerstone":25,"schema_type":26,"faq_json":5,"video_url":5,"canonical_url":27,"meta_title":28,"meta_description":29,"og_image":5,"toc_json":30,"code_examples":84,"quiz":102,"exercises":107,"published_at":5,"updated_at":123,"prev":124,"next":128},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners","\u003Ch2 id=\"what-are-css-borders-and-outlines\">What Are CSS Borders and Outlines?\u003C\u002Fh2>\u003Cp>A \u003Cstrong>CSS border\u003C\u002Fstrong> is a line drawn around an element between its padding and margin. An \u003Cstrong>outline\u003C\u002Fstrong> is a similar line drawn outside the border that does not affect layout. \u003Cstrong>Rounded corners\u003C\u002Fstrong> come from \u003Ccode>border-radius\u003C\u002Fcode>. Our focus keyword is \u003Cstrong>CSS borders\u003C\u002Fstrong>, and this lesson also covers trending topics: CSS border-radius examples, pill buttons and circles, outline-offset, :focus-visible for accessible focus rings, border-image, gradient borders, logical border properties, and box-shadow rings.\u003C\u002Fp>\u003Ch2 id=\"1-the-border-shorthand\">1. The border Shorthand\u003C\u002Fh2>\u003Cp>\u003Ccode>border: 2px solid #334155;\u003C\u002Fcode> sets width, style and color in one line. Without a \u003Cstrong>style\u003C\u002Fstrong>, no border appears, because the default style is \u003Ccode>none\u003C\u002Fcode>.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>border-width\u003C\u002Fcode>: \u003Ccode>thin\u003C\u002Fcode>, \u003Ccode>medium\u003C\u002Fcode>, \u003Ccode>thick\u003C\u002Fcode> or a length like \u003Ccode>3px\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>border-style\u003C\u002Fcode>: \u003Ccode>solid\u003C\u002Fcode>, \u003Ccode>dashed\u003C\u002Fcode>, \u003Ccode>dotted\u003C\u002Fcode>, \u003Ccode>double\u003C\u002Fcode>, \u003Ccode>groove\u003C\u002Fcode>, \u003Ccode>ridge\u003C\u002Fcode>, \u003Ccode>inset\u003C\u002Fcode>, \u003Ccode>outset\u003C\u002Fcode>, \u003Ccode>none\u003C\u002Fcode>, \u003Ccode>hidden\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>border-color\u003C\u002Fcode>: any CSS color. It defaults to \u003Ccode>currentColor\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"2-individual-sides-and-logical-properties\">2. Individual Sides and Logical Properties\u003C\u002Fh2>\u003Cp>Set a single side with \u003Ccode>border-top\u003C\u002Fcode>, \u003Ccode>border-right\u003C\u002Fcode>, \u003Ccode>border-bottom\u003C\u002Fcode>, \u003Ccode>border-left\u003C\u002Fcode>. Modern CSS prefers \u003Cstrong>logical properties\u003C\u002Fstrong> that adapt to writing direction: \u003Ccode>border-inline-start\u003C\u002Fcode>, \u003Ccode>border-inline-end\u003C\u002Fcode>, \u003Ccode>border-block-start\u003C\u002Fcode>, \u003Ccode>border-block-end\u003C\u002Fcode>. They make right-to-left layouts (Arabic, Urdu, Hebrew) work automatically.\u003C\u002Fp>\u003Ch2 id=\"3-borders-and-the-box-model\">3. Borders and the Box Model\u003C\u002Fh2>\u003Cp>With the default \u003Ccode>box-sizing: content-box\u003C\u002Fcode>, borders add to the element's width. Use \u003Ccode>box-sizing: border-box\u003C\u002Fcode> so that width includes padding and border. Most resets set \u003Ccode>*, *::before, *::after { box-sizing: border-box; }\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"4-border-radius\">4. border-radius\u003C\u002Fh2>\u003Cp>\u003Ccode>border-radius\u003C\u002Fcode> rounds corners.\u003C\u002Fp>\u003Cul>\u003Cli>One value: all corners. \u003Ccode>border-radius: 12px;\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Two to four values follow the order top-left, top-right, bottom-right, bottom-left.\u003C\u002Fli>\u003Cli>Circle: a square element with \u003Ccode>border-radius: 50%\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Pill or capsule: \u003Ccode>border-radius: 9999px\u003C\u002Fcode> (a huge value works for any height).\u003C\u002Fli>\u003Cli>Elliptical corners use a slash: \u003Ccode>border-radius: 50% \u002F 20%\u003C\u002Fcode> (horizontal radius \u002F vertical radius).\u003C\u002Fli>\u003Cli>Individual longhands: \u003Ccode>border-top-left-radius\u003C\u002Fcode>, \u003Ccode>border-start-start-radius\u003C\u002Fcode> (logical).\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Rounded corners also clip backgrounds, and with \u003Ccode>overflow: hidden\u003C\u002Fcode> they clip child content, such as images inside cards.\u003C\u002Fp>\u003Ch2 id=\"5-outline\">5. outline\u003C\u002Fh2>\u003Cp>An \u003Cstrong>outline\u003C\u002Fstrong> is drawn outside the border edge, does not take space in layout and does not change the element's size. Properties: \u003Ccode>outline-width\u003C\u002Fcode>, \u003Ccode>outline-style\u003C\u002Fcode>, \u003Ccode>outline-color\u003C\u002Fcode>, \u003Ccode>outline-offset\u003C\u002Fcode> and the shorthand \u003Ccode>outline\u003C\u002Fcode>.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>outline-offset\u003C\u002Fcode> moves the outline away from the border (positive) or into it (negative).\u003C\u002Fli>\u003Cli>Modern browsers make outlines follow \u003Ccode>border-radius\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Outlines are perfect for focus rings, debugging layout (\u003Ccode>* { outline: 1px solid red; }\u003C\u002Fcode>) and hover highlights that must not shift layout.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"6-border-vs-outline-vs-box-shadow\">6. Border vs Outline vs Box-shadow\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Feature\u003C\u002Fth>\u003Cth>border\u003C\u002Fth>\u003Cth>outline\u003C\u002Fth>\u003Cth>box-shadow\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Affects layout\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Per-side control\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003Ctd>Via offsets\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Follows border-radius\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>Yes (modern)\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Offset from box\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003Ctd>Yes (outline-offset)\u003C\u002Ftd>\u003Ctd>Yes (spread)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Forced-colors (high contrast) visible\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"7-accessible-focus-styles\">7. Accessible Focus Styles\u003C\u002Fh2>\u003Cp>Never write \u003Ccode>outline: none\u003C\u002Fcode> without a replacement, because keyboard users depend on a visible focus indicator (WCAG 2.4.7 and 2.4.11). Use \u003Ccode>:focus-visible\u003C\u002Fcode>, which shows the ring for keyboard focus but usually not for mouse clicks.\u003C\u002Fp>\u003Cpre>\u003Ccode>:focus-visible {\n  outline: 3px solid #2563eb;\n  outline-offset: 3px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"8-border-image\">8. border-image\u003C\u002Fh2>\u003Cp>\u003Ccode>border-image\u003C\u002Fcode> paints an image or gradient on the border: \u003Ccode>border-image: linear-gradient(45deg, #f43f5e, #6366f1) 1;\u003C\u002Fcode>. It ignores \u003Ccode>border-radius\u003C\u002Fcode>, so for rounded gradient borders use the two-layer background technique (see the gradients lesson).\u003C\u002Fp>\u003Ch2 id=\"9-double-borders-and-rings-with-box-shadow\">9. Double Borders and Rings with box-shadow\u003C\u002Fh2>\u003Cp>Multiple rings: \u003Ccode>box-shadow: 0 0 0 3px white, 0 0 0 6px #2563eb;\u003C\u002Fcode>. Shadows do not affect layout, but they are not shown in forced-colors mode, so pair them with a transparent outline for accessibility: \u003Ccode>outline: 2px solid transparent;\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"best-practices\">Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Use \u003Ccode>box-sizing: border-box\u003C\u002Fcode> globally.\u003C\u002Fli>\u003Cli>Use \u003Ccode>rem\u003C\u002Fcode> or \u003Ccode>px\u003C\u002Fcode> radius tokens in your design system (for example 4px, 8px, 16px, 9999px).\u003C\u002Fli>\u003Cli>Prefer \u003Ccode>outline\u003C\u002Fcode> for focus and hover states so layout does not jump.\u003C\u002Fli>\u003Cli>Prefer logical border properties for international sites.\u003C\u002Fli>\u003Cli>Match child radius to parent radius minus padding for nested rounded shapes.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting \u003Ccode>border-style\u003C\u002Fcode>, so the border is invisible.\u003C\u002Fli>\u003Cli>Removing outlines and leaving no focus indicator.\u003C\u002Fli>\u003Cli>Using borders for hover effects, causing layout shift.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>border-image\u003C\u002Fcode> to round.\u003C\u002Fli>\u003Cli>Using \u003Ccode>border-radius: 50%\u003C\u002Fcode> on a non-square element and getting an ellipse instead of a circle.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Borders shape the box, outlines draw attention without shifting layout, and \u003Ccode>border-radius\u003C\u002Fcode> creates everything from soft cards to circles and pills. Combine them with \u003Ccode>:focus-visible\u003C\u002Fcode>, logical properties and box-shadow rings for polished, accessible interfaces. Explore the examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .b { display: inline-block; width: 120px; padding: 14px 8px; margin: 6px; text-align: center; font: 13px sans-serif; border-color: #2563eb; border-width: 4px; }\n  .s { border-style: solid; } .d { border-style: dashed; } .dt { border-style: dotted; } .db { border-style: double; } .gr { border-style: groove; } .ri { border-style: ridge; }\n<\u002Fstyle>\n<div class='b s'>solid<\u002Fdiv><div class='b d'>dashed<\u002Fdiv><div class='b dt'>dotted<\u002Fdiv><div class='b db'>double<\u002Fdiv><div class='b gr'>groove<\u002Fdiv><div class='b ri'>ridge<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .x { display: inline-block; margin: 8px; background: #2563eb; color: #fff; font: 13px sans-serif; text-align: center; }\n  .card { width: 120px; height: 80px; border-radius: 12px; line-height: 80px; }\n  .circle { width: 90px; height: 90px; border-radius: 50%; line-height: 90px; }\n  .pill { padding: 10px 24px; border-radius: 9999px; }\n  .leaf { width: 120px; height: 80px; border-radius: 40px 0 40px 0; line-height: 80px; }\n  .ellipse { width: 120px; height: 80px; border-radius: 50% \u002F 30%; line-height: 80px; }\n<\u002Fstyle>\n<div class='x card'>12px<\u002Fdiv><div class='x circle'>50%<\u002Fdiv><div class='x pill'>Pill button<\u002Fdiv><div class='x leaf'>leaf<\u002Fdiv><div class='x ellipse'>50% \u002F 30%<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .btn { padding: 10px 20px; border: 2px solid #2563eb; background: #fff; color: #2563eb; border-radius: 8px; cursor: pointer; margin: 10px; }\n  .btn:hover { outline: 3px solid #93c5fd; }\n  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 4px; }\n<\u002Fstyle>\n<p>Hover with the mouse, then press Tab to see the keyboard focus ring.<\u002Fp>\n<button class='btn'>Button 1<\u002Fbutton><button class='btn'>Button 2<\u002Fbutton>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; padding: 16px; }\n  .ring { display: inline-block; padding: 14px 22px; margin: 14px; background: #fff; border-radius: 12px; }\n  .r1 { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2563eb; }\n  .r2 { box-shadow: 0 0 0 3px #22c55e, 0 0 0 6px #ecfdf5, 0 0 0 9px #22c55e; }\n  .gb { border: 4px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f43f5e, #6366f1) border-box; }\n  .bi { border: 6px solid; border-image: linear-gradient(45deg, #f43f5e, #6366f1) 1; padding: 10px 18px; margin: 14px; display: inline-block; }\n<\u002Fstyle>\n<div class='ring r1'>Double ring<\u002Fdiv><div class='ring r2'>Triple ring<\u002Fdiv><div class='ring gb'>Rounded gradient border<\u002Fdiv><div class='bi'>border-image (no rounding)<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .note { max-width: 320px; padding: 12px 16px; margin: 10px 0; background: #f1f5f9; border-inline-start: 6px solid #2563eb; border-radius: 4px; }\n  .warn { border-inline-start-color: #f59e0b; background: #fffbeb; }\n  [dir='rtl'] .note { text-align: right; }\n  .card { max-width: 280px; border: 1px solid #cbd5e1; border-radius: 16px; overflow: hidden; }\n  .card .top { height: 80px; background: linear-gradient(135deg, #38bdf8, #6366f1); }\n  .card p { margin: 0; padding: 12px; }\n<\u002Fstyle>\n<div class='note'>Logical border on the start side<\u002Fdiv>\n<div class='note warn'>Warning note<\u002Fdiv>\n<div dir='rtl'><div class='note'>RTL: the border flips automatically<\u002Fdiv><\u002Fdiv>\n<div class='card'><div class='top'><\u002Fdiv><p>overflow: hidden clips children to the rounded corners.<\u002Fp><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":13,"slug":14},"CSS","css",{"name":16,"slug":17},"Colors, Backgrounds & Effects","colors-backgrounds-effects",{"slug":19,"display_name":20,"job_title":5,"short_bio":5,"expertise_tags":21,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":22,"posts":23},"badar-khalil","Badar Khalil",[],[],[],5,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-borders-outlines-rounded-corners","CSS Borders, Outlines & border-radius Guide","Learn CSS border, outline, outline-offset, border-radius, border-image and focus-visible with examples, best practices and accessibility tips.",[31,36,40,44,48,52,56,60,64,68,72,76,80],{"id":32,"text":33,"level":34,"children":35},"what-are-css-borders-and-outlines","What Are CSS Borders and Outlines?",2,[],{"id":37,"text":38,"level":34,"children":39},"1-the-border-shorthand","1. The border Shorthand",[],{"id":41,"text":42,"level":34,"children":43},"2-individual-sides-and-logical-properties","2. Individual Sides and Logical Properties",[],{"id":45,"text":46,"level":34,"children":47},"3-borders-and-the-box-model","3. Borders and the Box Model",[],{"id":49,"text":50,"level":34,"children":51},"4-border-radius","4. border-radius",[],{"id":53,"text":54,"level":34,"children":55},"5-outline","5. outline",[],{"id":57,"text":58,"level":34,"children":59},"6-border-vs-outline-vs-box-shadow","6. Border vs Outline vs Box-shadow",[],{"id":61,"text":62,"level":34,"children":63},"7-accessible-focus-styles","7. Accessible Focus Styles",[],{"id":65,"text":66,"level":34,"children":67},"8-border-image","8. border-image",[],{"id":69,"text":70,"level":34,"children":71},"9-double-borders-and-rings-with-box-shadow","9. Double Borders and Rings with box-shadow",[],{"id":73,"text":74,"level":34,"children":75},"best-practices","Best Practices",[],{"id":77,"text":78,"level":34,"children":79},"common-mistakes","Common Mistakes",[],{"id":81,"text":82,"level":34,"children":83},"summary","Summary",[],[85,90,93,96,99],{"id":86,"language":87,"code":88,"is_editable":89},269,"html","\u003Cstyle>\n  .b { display: inline-block; width: 120px; padding: 14px 8px; margin: 6px; text-align: center; font: 13px sans-serif; border-color: #2563eb; border-width: 4px; }\n  .s { border-style: solid; } .d { border-style: dashed; } .dt { border-style: dotted; } .db { border-style: double; } .gr { border-style: groove; } .ri { border-style: ridge; }\n\u003C\u002Fstyle>\n\u003Cdiv class='b s'>solid\u003C\u002Fdiv>\u003Cdiv class='b d'>dashed\u003C\u002Fdiv>\u003Cdiv class='b dt'>dotted\u003C\u002Fdiv>\u003Cdiv class='b db'>double\u003C\u002Fdiv>\u003Cdiv class='b gr'>groove\u003C\u002Fdiv>\u003Cdiv class='b ri'>ridge\u003C\u002Fdiv>",true,{"id":91,"language":87,"code":92,"is_editable":89},270,"\u003Cstyle>\n  .x { display: inline-block; margin: 8px; background: #2563eb; color: #fff; font: 13px sans-serif; text-align: center; }\n  .card { width: 120px; height: 80px; border-radius: 12px; line-height: 80px; }\n  .circle { width: 90px; height: 90px; border-radius: 50%; line-height: 90px; }\n  .pill { padding: 10px 24px; border-radius: 9999px; }\n  .leaf { width: 120px; height: 80px; border-radius: 40px 0 40px 0; line-height: 80px; }\n  .ellipse { width: 120px; height: 80px; border-radius: 50% \u002F 30%; line-height: 80px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='x card'>12px\u003C\u002Fdiv>\u003Cdiv class='x circle'>50%\u003C\u002Fdiv>\u003Cdiv class='x pill'>Pill button\u003C\u002Fdiv>\u003Cdiv class='x leaf'>leaf\u003C\u002Fdiv>\u003Cdiv class='x ellipse'>50% \u002F 30%\u003C\u002Fdiv>",{"id":94,"language":87,"code":95,"is_editable":89},271,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .btn { padding: 10px 20px; border: 2px solid #2563eb; background: #fff; color: #2563eb; border-radius: 8px; cursor: pointer; margin: 10px; }\n  .btn:hover { outline: 3px solid #93c5fd; }\n  .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 4px; }\n\u003C\u002Fstyle>\n\u003Cp>Hover with the mouse, then press Tab to see the keyboard focus ring.\u003C\u002Fp>\n\u003Cbutton class='btn'>Button 1\u003C\u002Fbutton>\u003Cbutton class='btn'>Button 2\u003C\u002Fbutton>",{"id":97,"language":87,"code":98,"is_editable":89},272,"\u003Cstyle>\n  body { font-family: sans-serif; padding: 16px; }\n  .ring { display: inline-block; padding: 14px 22px; margin: 14px; background: #fff; border-radius: 12px; }\n  .r1 { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2563eb; }\n  .r2 { box-shadow: 0 0 0 3px #22c55e, 0 0 0 6px #ecfdf5, 0 0 0 9px #22c55e; }\n  .gb { border: 4px solid transparent; border-radius: 14px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f43f5e, #6366f1) border-box; }\n  .bi { border: 6px solid; border-image: linear-gradient(45deg, #f43f5e, #6366f1) 1; padding: 10px 18px; margin: 14px; display: inline-block; }\n\u003C\u002Fstyle>\n\u003Cdiv class='ring r1'>Double ring\u003C\u002Fdiv>\u003Cdiv class='ring r2'>Triple ring\u003C\u002Fdiv>\u003Cdiv class='ring gb'>Rounded gradient border\u003C\u002Fdiv>\u003Cdiv class='bi'>border-image (no rounding)\u003C\u002Fdiv>",{"id":100,"language":87,"code":101,"is_editable":89},273,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .note { max-width: 320px; padding: 12px 16px; margin: 10px 0; background: #f1f5f9; border-inline-start: 6px solid #2563eb; border-radius: 4px; }\n  .warn { border-inline-start-color: #f59e0b; background: #fffbeb; }\n  [dir='rtl'] .note { text-align: right; }\n  .card { max-width: 280px; border: 1px solid #cbd5e1; border-radius: 16px; overflow: hidden; }\n  .card .top { height: 80px; background: linear-gradient(135deg, #38bdf8, #6366f1); }\n  .card p { margin: 0; padding: 12px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='note'>Logical border on the start side\u003C\u002Fdiv>\n\u003Cdiv class='note warn'>Warning note\u003C\u002Fdiv>\n\u003Cdiv dir='rtl'>\u003Cdiv class='note'>RTL: the border flips automatically\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class='card'>\u003Cdiv class='top'>\u003C\u002Fdiv>\u003Cp>overflow: hidden clips children to the rounded corners.\u003C\u002Fp>\u003C\u002Fdiv>",{"id":103,"slug":104,"title":105,"time_limit_seconds":5,"pass_percentage":106,"question_count":24},38,"borders-outlines-radius-quiz","Borders, Outlines and Rounded Corners Quiz",70,[108,116],{"id":109,"title":110,"slug":111,"prompt":112,"starter_code":113,"expected_output":114,"language":87,"order_index":115},111,"Build a Pill Button With a Focus Ring","pill-button-focus-ring","Style .pill so it has a 2px solid blue border, a fully rounded pill shape, and padding of 10px 24px. Add an accessible :focus-visible style using outline and outline-offset (do not remove the outline).","\u003Cstyle>\n  .pill { \u002F* your code *\u002F }\n  .pill:focus-visible { \u002F* your code *\u002F }\n\u003C\u002Fstyle>\n\u003Cbutton class='pill'>Subscribe\u003C\u002Fbutton>","A pill-shaped button with a visible orange or blue focus ring when tabbed to.",1,{"id":117,"title":118,"slug":119,"prompt":120,"starter_code":121,"expected_output":122,"language":87,"order_index":34},112,"Make an Avatar and a Callout Box","avatar-and-callout","Turn the .avatar div into a 80px circle with a 4px white border and a soft blue box-shadow ring. Then style .callout with a 5px left border using a logical property (border-inline-start), a light background and 6px radius.","\u003Cstyle>\n  .avatar { background: #94a3b8; \u002F* your code *\u002F }\n  .callout { padding: 12px 16px; \u002F* your code *\u002F }\n\u003C\u002Fstyle>\n\u003Cdiv class='avatar'>\u003C\u002Fdiv>\n\u003Cdiv class='callout'>Helpful tip goes here\u003C\u002Fdiv>","A circular avatar with a ring, and a callout with a colored start-side border.","2026-09-29T18:53:27+00:00",{"id":125,"slug":126,"title":127},97,"css-gradients-linear-radial-conic","CSS Gradients (Linear, Radial, Conic)",{"id":129,"slug":130,"title":131},99,"css-box-shadow-text-shadow","CSS Box Shadow & Text Shadow",{"data":133},[134,137,141,146,151],{"name":13,"slug":14,"description":135,"post_count":34,"subcategories":136},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":138,"slug":87,"description":139,"post_count":34,"subcategories":140},"HTML","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":142,"slug":143,"description":144,"post_count":115,"subcategories":145},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":147,"slug":148,"description":149,"post_count":115,"subcategories":150},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":152,"slug":153,"description":154,"post_count":115,"subcategories":155},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":157},[158,477],{"id":115,"name":138,"slug":159,"icon":5,"icon_url":5,"short_description":160,"meta_title":161,"meta_description":162,"og_image":163,"locale":164,"subcategories":165},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[166,191,227,251,327,360,374,402,426,442],{"id":115,"name":167,"slug":168,"order_index":115,"topics":169},"HTML Fundamentals & Setup","html-fundamentals-setup",[170,173,176,180,184,187],{"id":34,"title":171,"slug":172,"order_index":115,"cornerstone":25,"reading_time_minutes":34},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":115,"title":174,"slug":175,"order_index":115,"cornerstone":25,"reading_time_minutes":115},"HTML Introduction & History","html-introduction-and-history",{"id":177,"title":178,"slug":179,"order_index":177,"cornerstone":25,"reading_time_minutes":34},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":181,"title":182,"slug":183,"order_index":181,"cornerstone":25,"reading_time_minutes":34},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":24,"title":185,"slug":186,"order_index":24,"cornerstone":25,"reading_time_minutes":34},"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":188,"title":189,"slug":190,"order_index":188,"cornerstone":25,"reading_time_minutes":34},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":34,"name":192,"slug":193,"order_index":34,"topics":194},"Text & Content Basics","text-content-basics",[195,199,203,207,211,215,219,223],{"id":196,"title":197,"slug":198,"order_index":196,"cornerstone":25,"reading_time_minutes":34},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":200,"title":201,"slug":202,"order_index":200,"cornerstone":25,"reading_time_minutes":34},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":204,"title":205,"slug":206,"order_index":204,"cornerstone":25,"reading_time_minutes":115},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":208,"title":209,"slug":210,"order_index":208,"cornerstone":25,"reading_time_minutes":34},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":212,"title":213,"slug":214,"order_index":212,"cornerstone":25,"reading_time_minutes":34},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":216,"title":217,"slug":218,"order_index":216,"cornerstone":25,"reading_time_minutes":34},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":220,"title":221,"slug":222,"order_index":220,"cornerstone":25,"reading_time_minutes":34},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":224,"title":225,"slug":226,"order_index":224,"cornerstone":25,"reading_time_minutes":34},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":177,"name":228,"slug":229,"order_index":177,"topics":230},"Links, Media & Navigation","links-media-navigation",[231,235,239,243,247],{"id":232,"title":233,"slug":234,"order_index":232,"cornerstone":25,"reading_time_minutes":34},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":236,"title":237,"slug":238,"order_index":236,"cornerstone":25,"reading_time_minutes":34},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":240,"title":241,"slug":242,"order_index":240,"cornerstone":25,"reading_time_minutes":115},17,"HTML Favicon Setup","html-favicon-setup",{"id":244,"title":245,"slug":246,"order_index":244,"cornerstone":25,"reading_time_minutes":34},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":248,"title":249,"slug":250,"order_index":248,"cornerstone":25,"reading_time_minutes":34},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":181,"name":252,"slug":253,"order_index":181,"topics":254},"Structuring Content","structuring-content",[255,260,265,270,275,279,283,287,291,295,299,303,307,311,315,319,323],{"id":256,"title":257,"slug":258,"order_index":259,"cornerstone":25,"reading_time_minutes":34},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":25,"reading_time_minutes":34},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":25,"reading_time_minutes":34},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":25,"reading_time_minutes":115},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":276,"title":277,"slug":278,"order_index":256,"cornerstone":25,"reading_time_minutes":34},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":280,"title":281,"slug":282,"order_index":261,"cornerstone":25,"reading_time_minutes":115},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":284,"title":285,"slug":286,"order_index":266,"cornerstone":25,"reading_time_minutes":34},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":288,"title":289,"slug":290,"order_index":271,"cornerstone":25,"reading_time_minutes":34},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":292,"title":293,"slug":294,"order_index":276,"cornerstone":25,"reading_time_minutes":34},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":296,"title":297,"slug":298,"order_index":280,"cornerstone":25,"reading_time_minutes":177},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":300,"title":301,"slug":302,"order_index":284,"cornerstone":25,"reading_time_minutes":34},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":304,"title":305,"slug":306,"order_index":288,"cornerstone":25,"reading_time_minutes":34},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":308,"title":309,"slug":310,"order_index":292,"cornerstone":25,"reading_time_minutes":115},77,"HTML Symbols","html-symbols",{"id":312,"title":313,"slug":314,"order_index":312,"cornerstone":25,"reading_time_minutes":115},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":316,"title":317,"slug":318,"order_index":316,"cornerstone":25,"reading_time_minutes":34},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":320,"title":321,"slug":322,"order_index":320,"cornerstone":25,"reading_time_minutes":115},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":324,"title":325,"slug":326,"order_index":324,"cornerstone":25,"reading_time_minutes":115},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":196,"name":328,"slug":329,"order_index":24,"topics":330},"Forms & User Input","forms-user-input",[331,336,340,345,350,355],{"id":332,"title":333,"slug":334,"order_index":335,"cornerstone":25,"reading_time_minutes":34},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":337,"title":338,"slug":339,"order_index":103,"cornerstone":25,"reading_time_minutes":115},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",{"id":341,"title":342,"slug":343,"order_index":344,"cornerstone":25,"reading_time_minutes":115},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":346,"title":347,"slug":348,"order_index":349,"cornerstone":25,"reading_time_minutes":34},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":351,"title":352,"slug":353,"order_index":354,"cornerstone":25,"reading_time_minutes":34},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":356,"title":357,"slug":358,"order_index":359,"cornerstone":25,"reading_time_minutes":34},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":200,"name":361,"slug":362,"order_index":188,"topics":363},"Graphics & Visuals","graphics-visuals",[364,369],{"id":365,"title":366,"slug":367,"order_index":368,"cornerstone":25,"reading_time_minutes":177},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":370,"title":371,"slug":372,"order_index":373,"cornerstone":25,"reading_time_minutes":177},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":204,"name":375,"slug":376,"order_index":196,"topics":377},"Multimedia","multimedia",[378,383,388,393,398],{"id":379,"title":380,"slug":381,"order_index":382,"cornerstone":25,"reading_time_minutes":34},57,"HTML Media Overview","html-media-overview",45,{"id":384,"title":385,"slug":386,"order_index":387,"cornerstone":25,"reading_time_minutes":34},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":389,"title":390,"slug":391,"order_index":392,"cornerstone":25,"reading_time_minutes":34},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":394,"title":395,"slug":396,"order_index":397,"cornerstone":25,"reading_time_minutes":34},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":399,"title":400,"slug":401,"order_index":332,"cornerstone":25,"reading_time_minutes":34},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":208,"name":403,"slug":404,"order_index":200,"topics":405},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[406,410,414,418,422],{"id":407,"title":408,"slug":409,"order_index":337,"cornerstone":25,"reading_time_minutes":34},62,"HTML Geolocation API","html-geolocation-api",{"id":411,"title":412,"slug":413,"order_index":341,"cornerstone":25,"reading_time_minutes":34},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":415,"title":416,"slug":417,"order_index":346,"cornerstone":25,"reading_time_minutes":34},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":419,"title":420,"slug":421,"order_index":351,"cornerstone":25,"reading_time_minutes":34},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":423,"title":424,"slug":425,"order_index":356,"cornerstone":25,"reading_time_minutes":34},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":212,"name":427,"slug":428,"order_index":204,"topics":429},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[430,434,438],{"id":431,"title":432,"slug":433,"order_index":365,"cornerstone":25,"reading_time_minutes":34},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":435,"title":436,"slug":437,"order_index":370,"cornerstone":25,"reading_time_minutes":34},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":439,"title":440,"slug":441,"order_index":379,"cornerstone":25,"reading_time_minutes":34},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":216,"name":443,"slug":444,"order_index":208,"topics":445},"Reference & Practice","reference-practice",[446,449,453,457,461,465,469,473],{"id":106,"title":447,"slug":448,"order_index":115,"cornerstone":25,"reading_time_minutes":34},"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":450,"title":451,"slug":452,"order_index":34,"cornerstone":25,"reading_time_minutes":34},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":454,"title":455,"slug":456,"order_index":177,"cornerstone":25,"reading_time_minutes":34},72,"HTML Events Reference","html-events-reference",{"id":458,"title":459,"slug":460,"order_index":181,"cornerstone":25,"reading_time_minutes":34},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":462,"title":463,"slug":464,"order_index":24,"cornerstone":25,"reading_time_minutes":34},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":466,"title":467,"slug":468,"order_index":188,"cornerstone":25,"reading_time_minutes":34},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":470,"title":471,"slug":472,"order_index":196,"cornerstone":25,"reading_time_minutes":177},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":474,"title":475,"slug":476,"order_index":200,"cornerstone":25,"reading_time_minutes":115},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":34,"name":13,"slug":14,"icon":5,"icon_url":5,"short_description":478,"meta_title":479,"meta_description":480,"og_image":5,"locale":164,"subcategories":481},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[482,507,528],{"id":220,"name":483,"slug":484,"order_index":485,"topics":486},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[487,491,495,499,503],{"id":488,"title":489,"slug":490,"order_index":115,"cornerstone":25,"reading_time_minutes":181},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":492,"title":493,"slug":494,"order_index":34,"cornerstone":25,"reading_time_minutes":181},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":496,"title":497,"slug":498,"order_index":177,"cornerstone":25,"reading_time_minutes":177},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":500,"title":501,"slug":502,"order_index":181,"cornerstone":25,"reading_time_minutes":177},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":504,"title":505,"slug":506,"order_index":24,"cornerstone":25,"reading_time_minutes":24},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":232,"name":16,"slug":17,"order_index":485,"topics":508},[509,513,517,518,519,520,524],{"id":510,"title":511,"slug":512,"order_index":224,"cornerstone":25,"reading_time_minutes":24},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":514,"title":515,"slug":516,"order_index":232,"cornerstone":25,"reading_time_minutes":181},96,"CSS Backgrounds","css-backgrounds",{"id":125,"title":127,"slug":126,"order_index":236,"cornerstone":25,"reading_time_minutes":24},{"id":8,"title":9,"slug":10,"order_index":240,"cornerstone":25,"reading_time_minutes":24},{"id":129,"title":131,"slug":130,"order_index":244,"cornerstone":25,"reading_time_minutes":188},{"id":521,"title":522,"slug":523,"order_index":248,"cornerstone":25,"reading_time_minutes":24},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":525,"title":526,"slug":527,"order_index":259,"cornerstone":25,"reading_time_minutes":188},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":224,"name":529,"slug":530,"order_index":485,"topics":531},"Selectors & the Cascade","selectors-the-cascade",[532,536,540,544,548,552,556,560],{"id":533,"title":534,"slug":535,"order_index":188,"cornerstone":25,"reading_time_minutes":181},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":537,"title":538,"slug":539,"order_index":196,"cornerstone":25,"reading_time_minutes":181},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":541,"title":542,"slug":543,"order_index":200,"cornerstone":25,"reading_time_minutes":181},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":545,"title":546,"slug":547,"order_index":204,"cornerstone":25,"reading_time_minutes":188},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":549,"title":550,"slug":551,"order_index":208,"cornerstone":25,"reading_time_minutes":24},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":553,"title":554,"slug":555,"order_index":212,"cornerstone":25,"reading_time_minutes":24},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":557,"title":558,"slug":559,"order_index":216,"cornerstone":25,"reading_time_minutes":181},93,"CSS Specificity Explained","css-specificity-explained",{"id":561,"title":562,"slug":563,"order_index":220,"cornerstone":25,"reading_time_minutes":24},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important"]