lost a corner, please advise
Replies
so the other night i remembered that rounded corners are a thing, and then i googled for a second and learned hey maybe they're not that hard?? this is kind of fun?? so i messed around with eri's profile for kicks but i uh. don't know how to do the top right corner. i just want to fill it in and round the corner to finish off the rectangle. i've pieced her profile together like a toddler with duplo bricks, so i don't think i can just "hashtagcolumn_X {border-top-right-radius etc etc}" since everything in that corner was moved individually...?
i'm assuming the relevant portion is this mess here, but who knows. i know i don't
.pet_name{position:absolute; left:370px; top:45px;font-family:georgia; font-size: 50px; text-transform: uppercase;}
.pet_color_info{position:absolute; left:375px; top:75px;font-size: 11px;}
.owner{position:absolute; left:505px; top:75px;font-size: 11px;}
.pet_like{position:absolute; left:590px; top:40px;}
{position:absolute; left:335px; top:85px; width: 300px; height: 40px; overflow:hidden;}
.treasure_item, .treasure_item img {width: 40px !important; height: 40px !important;}
If you'd like to have all the corners have the same radius, you can just use this:
{border-radius: 15px;}
If you'd like to specify the radius on each corner, you can use this:
{border-radius: 10px 11px 12px 13px;}
First number is top-left, second is top-right, third is bottom-right, and forth is bottom-left. That's how I do radius, anyways xD
i got that far, but uh, what do i attach that to? maybe i wasn't clear, but right now my left side corners are on pet_image, and the bottom right one is on pet_desc, it's not one whole box (which is probably not. the best way to do things, but i don't know how to fix this ruin of a profile lmao)
You could just add this:
{border-radius: 0px 15px 15px 0px;}
{border-radius: 15px 15px 0px 15px;}
that's definitely more elegant than what i picked up from google, but i'm afraid it's still not what i'm trying to do. i guess i'm still not being very clear? i want to extend the light grey background to behind the pet name area for a complete rectangle and round that (currently nonexistent) top right corner, not the two i left alone. it's looking like i can't do that at all, though, since that whole corner is basically free floating. i'm probably going to cop out and make a nice rounded rectangle background, which makes this thread a moot point :B thanks for the help, though!!
OH, like this?
You'll have to adjust the numbers probably, but change the .pet_name to this:
.pet_name{position:absolute; left:310px; top:30px; height:190px; width: 327px;font-family:georgia; font-size: 50px; text-transform: uppercase;background-color:; z-index: -1; padding-top:20px; border-radius: 0px 15px 0px 0px;}
then you can play with the positioning.