Jhutanda

CSS বর্ডার সাইডস (CSS Border Sides) [বাংলায় CSS মাস্টার ক্লাস]

CSS বর্ডার সাইডস (CSS Border Sides) [বাংলায় CSS মাস্টার ক্লাস]:

ওয়েব ডিজাইনের ক্ষেত্রে, দৃশ্যত চিত্তাকর্ষক এবং user friendly ওয়েবসাইট তৈরি করার জন্য বিশদ বিবরণের প্রতি নির্ভুলতা এবং মনোযোগ গুরুত্বপূর্ণ। CSS (ক্যাসকেডিং স্টাইল শীট) সীমানা দিকগুলির হেরফের মাধ্যমে এই স্তরের সূক্ষ্মতা অর্জনের জন্য একটি শক্তিশালী হাতিয়ার সরবরাহ করে। CSS বর্ডার-সাইড প্রপার্টি ব্যবহার করে, ওয়েব ডেভেলপাররা স্বতন্ত্র সীমানা কাস্টমাইজ করতে পারে, অনন্য ভিজ্যুয়াল ইফেক্ট তৈরি করতে পারে এবং সামগ্রিক নান্দনিকতা বাড়াতে পারে।

CSS প্রতিটি বর্ডার সাইডের জন্য আলাদা বৈশিষ্ট্য প্রদান করে—উপর, ডান, নীচে এবং বাম। এই বৈশিষ্ট্যগুলির মধ্যে রয়েছে বর্ডার-টপ(border-top), বর্ডার-ডান (border-right), বর্ডার-নিচ (border-bottom) এবং বর্ডার-বাম (border-left)। বিকাশকারীরা স্বাধীনভাবে প্রতিটি পাশের সীমানার প্রস্থ, শৈলী এবং রঙ নির্দিষ্ট করতে এই বৈশিষ্ট্যগুলি ব্যবহার করতে পারে। নিয়ন্ত্রণের এই স্তরটি জটিল এবং কাস্টমাইজড ডিজাইনের জন্য অনুমতি দেয়, যেমন একটি উপাদানের নির্দিষ্ট প্রান্তগুলিতে জোর দেওয়া বা বিষয়বস্তু বিভাগের মধ্যে বিভাজক তৈরি করা।

        border-top-style: dotted;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: dashed;

CSS বর্ডার সাইডস (CSS Border Sides) সম্পর্কে বিস্তারিত নিচে দেওয়া হল।

Example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>
    <button class="b1">Button1</button>
    <button class="b2">Button2</button>
    <button class="b3">Button3</button>
    <button class="b4">Button4</button>
    <button class="b5">Button5</button>
    <button class="b6">Button6</button>

    <!-- css style -->
    <style>
        .b1 {
            border-style: dashed;
        }

        .b2 {
            border-style: dotted;
        }

        .b3 {
            border-style: double;
        }

        .b4 {
            border-style: solid;
        }

        .b5 {
            border-style: double double dashed solid;
        }

        .b6 {
            border-top-style: dotted;
            border-right-style: solid;
            border-bottom-style: dotted;
            border-left-style: dashed;
        }
    </style>
</body>

</html>

Scroll to Top