Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Thin borders curved...

Bottom of Page

1 to 16 of 16

  1.  
    • CommentAuthorFants
    • CommentTimeJan 17th 2006 edited
     permalink
    Very nice site with helpful people, so here goes! I have searched the forums re the above topic... no luck. I am trying to make (using CSS) boxes to display items in. The user would then click and a pop up box (same style as thumbnail box) pops up.
    I have sorted the html code but cannot understand how to make CSS boxes with THIN (1 pixel) rounded corners. I have seen a couple of tutorials to make square css boxes to display content in, and rounded CSS boxes with images as the corners.

    Any ideas would be appreciated.

    One last thing. I am trying to place a solid fill colour at the top of the rounded CSS box (that would extend across the top of the box) purely for my design reasons!

    Thanks.

    moved to the right category (css & html) by droppyale.
  2.  permalink
    What is a solid 1px rounded corner?
    • CommentAuthorspyyddir
    • CommentTimeJan 17th 2006
     permalink
    Bullet Proof Web Design

    This book has a tutorial on exactly what you want (if I understand your question correctly).
    •  
      CommentAuthornifkin
    • CommentTimeJan 17th 2006 edited
     permalink
    FF/Moz support it in CSS. Everywhere else you'll need to hack around with images.
    • CommentAuthorFants
    • CommentTimeJan 18th 2006
     permalink
    To nick1presta: The 1 pixel solid border is a thin outline that can be used around an image (thats what Im trying to do) or for a table for example. You can see what 'nifkin' has done in his comment...

    Spyyddir, great link thanks. i looked at some of the downloadable code. Unfortunately they must use images as none of the boxes appear in my browsers (just the content)
    I see quite a lot of what Im after on the Web but I cant get to have a look at the code. It cant be that difficult as I see it on websites quite a bit!

    Nifkin, thanks for the info. Not sure about hacks but Ill keep researching!

    Anyone else trying to achieve the same effect???
    • CommentAuthorspyyddir
    • CommentTimeJan 18th 2006
     permalink
    Hehe, -moz-border-radius. Nice. Its unfortunate that more browsers don't support it.
    • CommentAuthorspyyddir
    • CommentTimeJan 18th 2006
     permalink
    You have to use images to achieve a cross-browser effect. And why can't you look at the code?
    • CommentAuthorFants
    • CommentTimeJan 18th 2006
     permalink
    Ah ok image use, I see... When I say I cant look at the code, if I see a nice CSS type box on line I dont have access to the CSS code to have a ply. No matter, Ill try and make up some square boxes to put my images into. I like to learn so off I go! Thanks for the posts to date. Ill be back.
  9.  permalink
    •  
      CommentAuthoradjustafresh
    • CommentTimeJan 18th 2006 edited
     permalink
    Fants, a couple questions with regard to accessing CSS code:

    Do you use Firefox? (I am assuming yes, since you can see the rounded corners in nifkin's example.)

    Do you have the web developer extension? If not, you must download it; it's a must have for web development, and it will make your life so much easier. Install it, and you're just a few clicks away from not only seeing a page's CSS, but being able to edit it live in your browser.

    You don't need to use the web developer extension to view css code (you just need to find the path and type it into your address bar), but it makes things much easier.

    *There is a web developer toolbar available for MSIE6 as well.
    • CommentAuthorSam K
    • CommentTimeJan 18th 2006
     permalink
    • CommentAuthorFants
    • CommentTimeJan 18th 2006
     permalink
    adjustafresh, thanks for the links. Actually I was looking at nifkins example above in Safari and seeing a square box lol! Couldnt quite understand what the story was there, thanks for putting me right.
    I guess then that this raises the real question; that is, I SHOULD be trying to make these round boxes as accessable to all users as possible, so, Safari, IE, FF... When I get this sorted I will have to look at the best method of coding to get the boxes to display in all these browsers.

    Am I correct in saying that CSS has limitations in that regard? Thanks for your help.
    • CommentAuthorFants
    • CommentTimeJan 18th 2006
     permalink
    Sam K, thanks ofr that. Very easy and understandable link. Others may also find this helpful.
    • CommentAuthorFants
    • CommentTimeJan 18th 2006
     permalink
    Yea nick1presta, thats an interesting couple of pages you posted there. More than one way to approach it. Homework time...
  15.  permalink
    Am I correct in saying that CSS has limitations in that regard?


    CSS3 will support multiple background images, rounded corners, opacity, multi-columns and other great things. CSS has come pretty far in support design like elements (such as rounded corners) but browser support makes all the difference anyways.
    • CommentAuthorJohnnyX
    • CommentTimeJan 20th 2006
     permalink
    http://cssplay.co.uk/boxes/index.html a selection of tutorials, even to make 'krazy corners'

    specifically:

    http://cssplay.co.uk/boxes/curves.html

    the whole site is amazing, incredible css ideas, and most, if not all, validate.

1 to 16 of 16

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page