Frage Wie kann ich die Scrollbar unter die Border stellen?

[NielsHenn]

Hallo, ich möchte diese Scrollbar unter die Border mit den Bildern packen. Ich hoffe das Bild veranschaulicht, was ich meine. Ich habe lediglich viele Bilder in die div class gepackt und möchte wissen, was ich ändern muss, damit ich diese Scrollbar unter der Border habe.

Danke schon mal im Voraus :)

          <div class="scrollbar">
               
        <a href="Videos.html"><img src="Grafiken/Old/New.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=7Z8giByw5VA" target="_blank"><img src="Grafiken/Old/Old34.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=-Ei1fiHgk7c" target="_blank"><img src="Grafiken/Old/Old33.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=ZR8D_OugGiw" target="_blank"><img src="Grafiken/Old/Old32.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=sUbGtxbZP_s" target="_blank"><img src="Grafiken/Old/Old31.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=00T9gLG3r_A" target="_blank"><img src="Grafiken/Old/Old30.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=5s5S1Da2Ht4" target="_blank"><img src="Grafiken/Old/Old29.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=E6PGxWf1kuw" target="_blank"><img src="Grafiken/Old/Old28.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=8hmc8TmSwcE" target="_blank"><img src="Grafiken/Old/Old27.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=vldZ6YGARuQ" target="_blank"><img src="Grafiken/Old/Old26.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=TK9kywuU8lM" target="_blank"><img src="Grafiken/Old/Old25.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=D5byqgBCvYQ" target="_blank"><img src="Grafiken/Old/Old24.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=7ApSUfqzbH8" target="_blank"><img src="Grafiken/Old/Old23.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=G0n9W7o6uqA" target="_blank"><img src="Grafiken/Old/Old22.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=9ypu7YQ073U" target="_blank"><img src="Grafiken/Old/Old21.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=D2hhan1tJBw" target="_blank"><img src="Grafiken/Old/Old20.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=25p7p4C00MA" target="_blank"><img src="Grafiken/Old/Old19.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=kOaZdNhCmAk" target="_blank"><img src="Grafiken/Old/Old18.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=-ug2GIBE6q0" target="_blank"><img src="Grafiken/Old/Old17.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=19abmqTaXOM" target="_blank"><img src="Grafiken/Old/Old16.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=MwEIdRNhpZA" target="_blank"><img src="Grafiken/Old/Old15.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=Y9_pia9zeDg" target="_blank"><img src="Grafiken/Old/Old14.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=HKXaj1Ieovs" target="_blank"><img src="Grafiken/Old/Old13.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=Ese4KzOTBTQ" target="_blank"><img src="Grafiken/Old/Old12.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=Nf0H0SeZSM8" target="_blank"><img src="Grafiken/Old/Old11.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=4pC7g2dMOvQ" target="_blank"><img src="Grafiken/Old/Old10.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=xME0EaQ1OtM" target="_blank"><img src="Grafiken/Old/Old9.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=VUVqYbyu2EE" target="_blank"><img src="Grafiken/Old/Old8.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=ysv519Kl6dY" target="_blank"><img src="Grafiken/Old/Old7.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=PcEXW0pN8Xc" target="_blank"><img src="Grafiken/Old/Old6.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=jekX9Xk2LyA" target="_blank"><img src="Grafiken/Old/Old5.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=VW1CfHtuyko" target="_blank"><img src="Grafiken/Old/Old4.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=bTMjR65Jn1U" target="_blank"><img src="Grafiken/Old/Old3.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=6lWGP8X8Zzk" target="_blank"><img src="Grafiken/Old/Old2.png" width="250px" height="140px"/></a>
        <a href="https://www.youtube.com/watch?v=ZJtaf_4FPEY" target="_blank"><img src="Grafiken/Old/Old1.png" width="250px" height="140px"/></a>
        </div>

 

[SpiceLab]

Hierzu wäre eine <div>-Verschachtelung vonnöten, um die Scrollbar auszulagern. Haken daran: der Rahmen scrollt dann mit, was aber nicht im Sinne des Erfinders ist.

Zumindest unten links/rechts sollte auf border-radius verzichtet werden, um die Überlagerung des Rahmens zu vermeiden.

.scrollbar {
...
border-top-left-radius:30px;
border-top-right-radius:30px
}

PS: Ihr (TimoW u. Du) könnt ja mal Euren Lehrer danach fragen.