Most efficient way to design half a rounded box with speed in mind?
After some recent happenings it turns out I have to design the front end/visual aspects for a project my team just finished. I haven't touched CSS for about a year as I have been doing things on the backend, not even touching a bit of css in tandem with xhtml.
I have read up, refreshed my mind a bit, but there is one thing I am still a little bit confused about. I have two boxes <div> boxes that are for voting. I tried to find an example for you guys to show you what I want. Right here, on jyte.com those voting buttons are almost exactly what I need.
I searched google and was flooded with a thousand different ways to create rounded boxes. And most of them don't really apply, at least not any of the pre-fab boxes because I only need two corners.
What I was thinking I should so is create my box normally with whatever color I want as a simple square, and then create the right/left side of the box with the two rounded corners as a .gif/.png and just place them aside the box via some <div> positioning?
Or should I create a top left/right bottom left/right .gif/.png instead and load them into the image via CSS positioning.
I looked at the source over at jyte and it looks like they are just setting one background-image via CSS and loading that whole image into the <div> When I did that with my file, I got a file that was 60KB! Way too big!
So thank you for looking and I hope someone can provide some insight.
I am on my way. :)