কম্পিউটার টিউটোরিয়াল

CSS দিয়ে নেভবারের চারদিকে বর্ডার সেট করুন


নেভবারের চারদিকে বর্ডার যোগ করতে <ul> এলিমেন্টে বর্ডার সেট করুন।

ul {   border: 2px solid blue; }

উদাহরণ

নিচের কোড রান করে বর্ডার সেট করুন।

<!DOCTYPE html> <html>   <head>     <style>       ul {         list-style-type: none;         margin: 0;         padding: 0;         width: 200px;         border: 2px solid blue;       }       li a {         display: block;         background-color: #F0E7E7;       }       .active {         background-color: #4CAF50;         color: white;       }       li {         text-align: center;         border-bottom: 1px solid #555;       }     </style>   </head>   <body>     <ul>       <li><a href = "#home">Home</a></li>       <li><a href = "#company" class = "active">Company</a></li>       <li><a href = "#product">Product</a></li>       <li><a href = "#services">Services</a></li>       <li><a href = "#contact">Contact</a></li>     </ul>   </body> </html>

  1. CSS-এ নিচের বাম কোণার বর্ডার সেট করা

  2. CSS-এ নিচের ডান কোণার বর্ডার সেট করা

  3. CSS border-top-left-radius দিয়ে উপরের বাম কোণার বর্ডার গোলাকার করা

  4. CSS-এ উপরের ডান কোণার বর্ডার সেট করুন