约4张图片的边框

Question

I'm making a website for my study and I want to make a newsblock. Now i have 4 items: f1, tour, cultunair and theater.

<div id = "nieuws">
            <div id="nieuwstekst">Nieuws:</div>
                <a href="activiteiten.html" target="">
                    <div id="f1">
                        <img src="f1.jpg" alt="">
                            <div id="f1tekst">F1 terug naar zandvoort</div>
                            <div id="f1subtekst">Klik voor meer informatie</div>
                    </div>
                </a>    
                <a href="activiteiten.html" target="">
                    <div id="tour">
                        <img src="tour.jpg" alt="">
                        <div id="tourtekst">Tour de france 2016 door Haarlem</div>
                            <div id="toursubtekst">Klik voor meer informatie</div>
                    </div>
                </a>
                <a href="activiteiten.html" target="">
                    <div id="cultunair">
                        <img src="cultunair.jpg" alt="">
                            <div id="cultunairtekst">NIEUW: Cultunaire dag</div>
                            <div id="cultunairsubtekst">Klik voor meer informatie</div>
                    </div>
                </a>    
                <a href="activiteiten.html" target="">
                    <div id="theater">
                        <img src="theater.jpg" alt="">
                        <div id="theatertekst">Nederlands Theater Festival in Haarlem</div>
                            <div id="theatersubtekst">Klik voor meer informatie</div>
                    </div>
                </a>
        </div>

In my css i placed this pictures in two rows of two pictures:

#f1{
position: absolute; 
left: 1%;
top: 40%;
background-color: #000000;
border: 3px solid #000000;
border-radius:10px;
padding:3px 3px; 
}

#tour{
position: absolute; 
left: 26%;
top: 40%;
background-color: #000000;
border: 3px solid #000000;
border-radius:10px;
padding:3px 3px; 
}
#cultunair{
position: absolute; 
left: 1%;
top: 70%;

background-color: #000000;
border: 3px solid #000000;
border-radius:10px;
padding:3px 3px; 
}
#theater{
position: absolute; 
left: 26%;
top: 70%;
background-color: #000000;
border: 3px solid #000000;
border-radius:10px;
padding:3px 3px; 
}

But now I want to make in css a border in #nieuws around the four Items. Can anybody exlain me how to do that?

I tried this, but that won't work:

#nieuws{
position: absolute; 
left: 1%;
top: 40%;
border: 3px solid #88bd32;
border-radius:10px;
padding:3px 3px; 
}

can anybody help me?

Thanks a lot!

Answer 1

It seems to me you can play with separate attributes border-right, border-left, border-top, border-bottom. They have the same properties as border attribute. Eg:

.myclass {
border-right: 1px solid black;
border-left: none
}

Answer 2

Something like this? Removes the positions, because your div's where floating around, and your main nieuws div not.

#f1 {
    left: 1%;
    top: 40%;
    background-color: #000000;
    border: 3px solid #000000;
    border-radius:10px;
    padding:3px 3px;
}
#tour {
    left: 26%;
    top: 40%;
    background-color: #000000;
    border: 3px solid #000000;
    border-radius:10px;
    padding:3px 3px;
}
#cultunair {
    left: 1%;
    top: 70%;
    background-color: #000000;
    border: 3px solid #000000;
    border-radius:10px;
    padding:3px 3px;
}
#theater {
    left: 26%;
    top: 70%;
    background-color: #000000;
    border: 3px solid #000000;
    border-radius:10px;
    padding:3px 3px;
}
#nieuws {
    left: 1%;
    top: 40%;
    border: 3px solid #88bd32;
    border-radius:10px;
    padding:3px 3px;
}

Fiddle here