CSS Border Color In Hindi

📔 : CSS 🔗

border-color property का use करके आप किसी भी element के लिए border की color को define कर सकते हैं।

p{
  border-style:outset;
  border-color:green;
}

CSS border-color example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS border-color Example</title>
    <style>
      #p1{
        border-style:groove;
        border-width:10px;
        border-color: aqua;
      }   
    </style>
  </head>
  <body>
    <p id="p1">border-color example</p>
  </body>
</html>

CSS specify border-color for every side

जिस तरह से border-width को हर side से define किया था ठीक उसी तरह से आप border color भी define कर सकते हो।

{
  border-style : groove;
  border-color : top_color right_color bottom_color left_color;
}
CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS border-color Example</title>
    <style>
      #p1{
        border-style:groove;
        border-width:10px;
        border-color: blue blueviolet lightskyblue lightsteelblue;
      }  
      #p2{
        border-style:solid;
        border-width:10px;
        border-color: red lightcoral palevioletred hotpink;
      }  
      #p3{
        border-style:dashed;
        border-width:10px;
        border-color: yellow yellowgreen goldenrod greenyellow;
      } 
      #p4{
        border-style:inset;
        border-width:10px;
        border-color: green red blueviolet gold;
      } 
    </style>
  </head>
  <body>
    <p id="p1">border-color example</p>
    <p id="p2">border-color example</p>
    <p id="p3">border-color example</p>
    <p id="p4">border-color example</p>
  </body>
</html>

Example में color name use किये गए हैं , आप चाहे तो RGB , HEX , HSL , RGBA, HSLA की कोई भी valid color भी दे सकते हैं।

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers