class="post-template-default single single-post postid-433 single-format-standard wp-custom-logo wp-embed-responsive right-sidebar nav-float-right separate-containers header-aligned-left dropdown-hover featured-image-active" itemtype="https://schema.org/Blog" itemscope>

CSS Border shorthand property in Hindi

Shorthand border property के मदद से आप एक साथ border width , style , color define कर रहे होते है।

Syntax

element {
                 border : width style color;
               }

Example

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Border shorthand property in Hindi</title>
  </head>
  <body>
    <h1 style="border: 10px outset red;">CSS Border shorthand property in Hindi</h1>
    <h1 style="border: 15px inset goldenrod;">CSS Border shorthand property in Hindi</h1>
    <p style="border: 5px dashed green;">CSS Border shorthand property in Hindi</p>
  </body>
</html>
CSS Border shorthand property in Hindi

CSS Border shorthand property in Hindi

CSS Border shorthand property in Hindi

CSS Border shorthand property in Hindi

CSS specify border for every side in Hindi

अगर आप चाहे तो border के हर एक side को अलग अलग define कर सकते हो

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS border-top Example</title>
  </head>
  <body>
    <p style="border-top:8px solid blue ;">border-top Example</p>
    <p style="border-left:8px solid red;">border-left Example</p>
    <p style="border-bottom:8px solid yellow;">border-left Example</p>
    <p style="border-right:8px solid red;">border-left Example</p>
  </body>
</html>
CSS border-top Example

border-top Example

border-left Example

border-left Example

border-left Example

CSS border radius in Hindi

Border को round shape देने के लिए border-radius property का use किया जाता है।

Syntax

element {
                border:8px inset green;
                border-radius: 5px;
              }

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS border-radius Example</title>
  </head>
  <body>
    <p style="border:8px inset green;border-radius: 20px 15px 10px 5px;">border-radius: 20px 15px 10px 5px;</p>
    <p style="border:8px inset gold;border-radius: 5px 10px 15px 20px;">border-radius: 5px 10px 15px 20px;</p>
    <p style="border:8px inset red;border-radius: 15px 3px 3px">border-radius: 15px 3px 3px;</p>
  </body>
</html>
CSS border-radius Example

border-radius: 20px 15px 10px 5px;

border-radius: 5px 10px 15px 20px;

border-radius: 15px 3px 3px;

Related Content 🚀

Leave a comment