CODEWITHSUNDEEP
htmlcssrounded-corners
ptkato
ptkato

Reputation: 708

Removing the background from rounded corners

https://i.sstatic.net/TP7rY.png

That's the problem, I'm tryin' but I can't remove that background-color from the rounded corners.

HTML

<div id="principal" align="center">
<header>
        <h1>
            <img src="images/pg_img.png" onMouseOver="this.src='images/pg_img_hover.png'" onMouseOut="this.src='images/pg_img.png'";>
        </h1>
    </header>
</div>

CSS

#principal {
    background-color:rgb(255, 255, 255);
    background-color:rgba(255, 255, 255, 0.5);
    margin:20px;
}
#principal header {
    margin:0px;
    width:100%;
}
#principal header h1 {
    border:15px solid black;
    border-radius:20px 20px 0 0;
}

Well, above's the code.

Upvotes: 2

Views: 2311

Answers (2)

Tom Chung
Tom Chung

Reputation: 1422

See if this can help you.

Two way

#principal {
    background-color:rgba(255, 255, 255, 0.5);
    margin:20px;
    border-radius:20px 20px 0 0;
    overflow:hidden;
}
#principal header {
    margin:0px;
    width:100%;
}
#principal header h1 {
    border:15px solid black;
}

Or

#principal {
    margin:20px;
}
#principal header {
    margin:0px;
    width:100%;
}
#principal header h1 {
    background-color:rgba(255, 255, 255, 0.5);
    border:15px solid black;
    border-radius:20px 20px 0 0;
}

Upvotes: 3

CRABOLO
CRABOLO

Reputation: 8793

the problem is that your background-color is on #principal, and your rounded corners are on #principal header h1

try this

delete this from #principal

background-color: rgb(255,255,255);
background-color: rgba(255,255,255,0.5);

and move it to #principal header h1

#principal header h1 {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.5);
}

Upvotes: 2

Related Questions