creationtwentytwo
Member
Posted 3 years ago #
Hi there,
I'm fresh to WP development, and while I guess I'm fairly confident with XHTML/CSS, this is something I've never had to do and am struggling with.
I want to give each post a background, just a flat color but with rounded corners, what's the best way to go about this?
I first thought about using a background png with the rounded corners but then realised the posts would be varying in length so the sizes of the background 'box' will vary.
I plan to use the same effect on the sidebar sections so it would be great if someone could help me out with this.
Many thanks.
You can do this entirely with CSS - no images required. Take a look at the following Tutorial
WizardRegis
Member
Posted 3 years ago #
I got a headache just by looking at the code from the above link.
You can have round corners for different widths with images. Just make 4 different corner images and place them as four different div/span with background and float left/right style.
Or you can use pure CSS:
background:#73858C;
border:solid 1px #73858C;
border-radius:4px; /* exists in CSS 3 */
-moz-border-radius:4px; /* browser hack */
-khtml-border-radius:4px; /* browser hack */
-webkit-border-radius:4px; /* browser hack */
The above work in Chrome and Firefox, but not in IE and Opera.
LOL:) You got a headache from looking at probably the most simple method EVER of making rounded corners - without all the nonsense of having to screw around making rounded corners?
Assuming one has the proficiency in a graphic editor to create them in the first place.
The link I provided works in ALL browsers, does not require hacks, does not require extensive programing or CSS skills, and does not require CSS3 - which is not even released yet (still in development).
