• سماكة الإطار "border-width"
  
• ألوان الإطارات "border-color"
  
• تصميم الإطار "border-style"
  
• أمثلة لإطارات
  
• جمع كل الخصائص "border"
  

سماكة الإطار "border-width"

الكود:

border-width

ألوان الإطارات "border-color"

تصميم الإطارات "border-style"

أمثلة لإطارات

الكود:

<h1>

الكود:

<h2>

الكود:

<ul>

الكود:

<p>

الكود:

   h1 {
      border-width: thick;
      border-style: dotted;
      border-color: gold;
   }

   h2 {
      border-width: 20px;
      border-style: outset;
      border-color: red;
   }

   p {
      border-width: 1px;
      border-style: dashed;
      border-color: blue;
   }

   ul {
      border-width: thin;
      border-style: solid;
      border-color: orange;
   }
   

• شاهد المثال
  

الكود:

   h1 {
      border-top-width: thick;
      border-top-style: solid;
      border-top-color: red;

      border-bottom-width: thick;
      border-bottom-style: solid;
      border-bottom-color: blue;

      border-right-width: thick;
      border-right-style: solid;
      border-right-color: green;

      border-left-width: thick;
      border-left-style: solid;
      border-left-color: orange;
   }
   

• شاهد المثال
  

جمع كل الخصائص "border"

الكود:

   p {
      border-width: 1px;
      border-style: solid;
      border-color: blue;
   }
   

الكود:

   p {
      border: 1px solid blue;
   }