CODEWITHSUNDEEP
htmlcssborder
Olaf lol
Olaf lol

Reputation: 87

Html/Css border around list

I am wondering how to make a border around a unordered list and just around the list. kinda like a box.

Upvotes: 0

Views: 28502

Answers (3)

Theri Muthu Selvam
Theri Muthu Selvam

Reputation: 162

The code below can help you to create a table structure with a list.

ul{
        list-style-type: none;
        margin-top:0;
        padding-left: 0;
        border: 1px solid orangered;
        }
        
        li:not(:last-child){
          border-bottom: 1px solid orangered;
        }
}
<body>
<div>
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
</body>

Upvotes: 0

Michael Barreiro
Michael Barreiro

Reputation: 328

There is 2 ways you can go about this. You can put a ul selector like shown in the other example, or just put that in a , kind of like a container. Then just edit it with height and width. But I'll stick with sense thats what you asked for. Below is some code.

ul {
  border: 1px solid black;
  padding-right: 0px;
  padding-left: 28px;
  width: 50px;
  border-radius: 5px;
}
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>

let me know if you have any other questions on this!

Upvotes: 1

FalcoB
FalcoB

Reputation: 1333

ul{
        display:inline-block;
        border:1px solid #000;
        padding:20px;
}
<ul>
  <li>hey</li>
  <li>hey</li>
  <li>hey</li>
</ul>

that should do the trick! :)

edit

i've edited my answer... now its just around the list items... not 100%

Upvotes: 6

Related Questions