Rounded image/table corners

[jordannamorgan]

This is probably a question I should have asked a long time ago, but it's come up again in my updating of some old layouts, so. :Þ

A couple of different layouts I use (including my own journal and prose_alchemist) not only give rounded corners to entries and modules, they insist on rounding off the corners--or sometimes half the corners--of my header images as well.

Is there a way I can get rid of all the rounded corners, and just have nice, straight, angular ones? I'd like to do that with the header images and entries/modules, although I'd settle for just not having the corners of my headers forcibly rounded off. (If I wanted them rounded, I would have made them that way, DW...)

EDIT: issue solved! CSS to do the trick is here in the comments. Thanks for the helps!

Comments

[branchandroot]

Background images take the shape of whatever their container is, like looking through a cut-out at a picture underneath it, so if the #header container is rounded, a background image will be also. That's the "why it's happening" part. The "if you want sharp corners" part is therefore "tell the container not to have rounded corners".

The property you want to change is "border-radius". Try adding this to your custom css:

#header ( border-radius: none; }

You can also specify that for #entry, #footer, etc.

[jordannamorgan]

Hmm... I tried that on both of the journals I referred to, and it didn't work on either of them. :/

[branchandroot]

I'm not seeing the rule appearing in your styles (looking at the output code of your personal journal at the moment). Ah! If you copied and pasted it directly, that parenthese should be a curly brace. { instead of (. Typos, the bane of existence.

[jordannamorgan]

Yeah, didn't notice that... but I just changed the bracket to the correct one, and still nothing.

[branchandroot]

Okay, poked at it a bit more this morning. The command is getting on there, but for some reason it's being over-written by the previous style. *frowns at it* Which really shouldn't be happening, and I wonder if this is actually a CSS3 bug, but in the meantime there's a fix! You just need to add !important, like so:

#header,
#entry,
#module,
#footer { border-radius: none !important; }

[jordannamorgan]

Wow... It still isn't having any effect at all. :( This one thing just seems absolutely determined to be unchangeable.

[branchandroot]

O_O I am completely boggled. That border-radius command is definitely in the official style css, which falls before the custom css, even if the first one had an !important (which it doesn't) there should be no way for it to override this. You might need to submit this as an actual bug via the Help desk.

[jordannamorgan]

Huh. Thanks. I'll see if I can report it.

[jordannamorgan]

FYI, got the answer from the help desk. :) Apparently the code needs a parameter of "0" instead of "none". Here is the corrected version I was given (which works, yay):

#header,
#footer,
#primary,
.comment,
.module {
border-radius: 0 !important;
}

Thanks for all your efforts to help!

(Ironically, after looking at the change on my personal journal, I decided not to use it there. I'm quite glad to be rid of the wonky half-rounding on my fic journal, though.)

[branchandroot]

*facepalm* That'll teach me to double-check the 'nothing' parameter. Glad you got it all worked out!

[vorador]

try adding this at the bottom of your custom css:

* {border-radius:0!important;}

[jordannamorgan]

Yes, the "0" instead of "none" is what it needed. :) I got that info from the help desk first, but thank you though!

[baggyeyes]

Have you looked at themes without rounded corners that you could use instead?

However, I tried vorador's suggestion of * {border-radius:0!important} in inspect element, and it worked. Put it at the top of your CSS overrides.

[jordannamorgan]

I have my journals exactly the way I want them otherwise (and other layouts could move things around in ways I wouldn't be happy with), so I didn't want the hassle of re-customizing a whole new layout if I could just drop in some code to fix one little detail.

Which, as it turns out, I could indeed--because yes, using "0" instead of "none" is what was needed. Help desk confirmed that.