Border

إنضم لكورسات الأكاديمية وإستفيد من الخصم الخاص في البداية من هنا
نوصي بكورس تعلم أساسيات البرمجة من أكاديمية Codezilla من هنا
لحجز إستضافة من Hostinger والحصول على الخصم عن طريقي إتبع الشرح من هنا

من جوجل

ال Code الموجود في الدرس

من جوجل

تعليق واحد

  • Level 2

    Border

    In CSS the border property is used to define the border of an element. The border property is shorthand that combines several individual properties related to the border, such as border-width, border-style, and border-color.

    The general syntax for the border property is as follows:
    border: [border-width] [border-style] [border-color];

    1- border-width: This property sets the width of the border. You can specify a single value for all sides or use the individual properties border-top-width, border-right-width, border-bottom-width, and border-left-width to set different widths for each side. The value can be in pixels, ems, rems, percentages, etc.

    /* Example with a single value for all sides */
    border-width: 2px;

    /* Example with different values for each side */
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 3px;
    Border-left-width: 4px;

    2- border-style: This property sets the style of the border, such as solid, dashed, dotted, double, etc. Like border-width, you can set a single style for all sides or use individual properties for each side.

    /* Example with a single style for all sides */
    border-style: solid;

    /* Example with different styles for each side */
    border-top-style: dashed;
    border-right-style: dotted;
    border-bottom-style: double;
    border-left-style: solid;

    3- border-color: This property sets the color of the border. You can specify a color using a named color, a hex code, an RGB value, or any other valid CSS color representation. Like the previous properties, you can set a single color for all sides or use individual properties for each side.

    /* Example with a single color for all sides */
    border-color: #333;

    /* Example with different colors for each side */
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;

    Putting it all together

    /* Shorthand with all components */
    border: 2px solid #333;

    /* Expanded form with individual properties */
    border-width: 2px;
    border-style: solid;
    border-color: #333;

    It’s worth noting that you can use any combination of these properties based on your design requirements. Additionally, there are variations of the border property, such as border-top, border-right, border-bottom, and border-left, which allow you to set properties for specific sides independently.


اترك تعليقاً