Rounded Corners and Post Backgrounds

  • creationtwentytwo

    (@creationtwentytwo)


    17 years, 3 months 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Saurus

    (@saurus)

    17 years, 3 months ago

    You can do this entirely with CSS – no images required. Take a look at the following Tutorial

    wizardregis

    (@wizardregis)

    17 years, 3 months 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.

    Saurus

    (@saurus)

    17 years, 3 months ago

    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).

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Rounded Corners and Post Backgrounds’ is closed to new replies.