James Carlos

  • Archive
  • RSS
  • Ask me anything

(Better) Tabs with Round Out Borders | CSS-Tricks

A good-looking tab control usually has one feature that I’ve always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let’s start with some basic markup.

    • #css
    • #tabs
    • #css3
    • #round
    • #navigation
    • #html5
    • #webdesign
    • #roundedcorners
    • #html
    • #css3 tabs
  • 1 month ago
  • 128
  • Comments
  • Permalink
  • Share
    Tweet

128 Notes/ Hide

  1. jamescarlos posted this

Recent comments

Blog comments powered by Disqus
← Previous • Next →
You guessed it, I'm James! I'm a software application engineer who enjoys software development, photography, food, design, mechanical keyboards, vinyl records & time travel.

Me, Elsewhere

  • jamescarlos on Dribbble
  • jamescarlos on Forrst
  • @jamescarlos on Twitter
  • Facebook Profile
  • thejames on Flickr
  • jamescarlos on Delicious
  • jamescarlos on Pinboard
  • jamescarlos on Digg
  • ruiner17 on Last.fm
  • jamescarlos on Foursquare
  • Linkedin Profile
  • jamescarlos on github

Twitter

loading tweets…

I Dig These Posts

See more →
  • Audio post via jakefogelnest

    Whitney Houston’s isolated vocal track on “How Will I Know.”

    Audio post via jakefogelnest
  • Photo via staff

    We’ll be rolling out Fan Mail — a new interblog messaging service — over the next few days for everyone.

    You can send unlimited Fan Mail to the...

    Photo via staff
  • Photo via rodelb

    CLOSED #pikesplace #seattle #iphoneography (Taken with instagram)

    Photo via rodelb
  • Photo via urbanojohn

    Christmas eve with my cousins and brother. Taken and edited by my brother.

    Photo via urbanojohn
  • Post via 1p1e1
    9 reasons you must install Sublime Text 2. Code like a man, man.

    Don’t miss my new blog post:
    How to create a kick-ass product? What I learned...
    Post via 1p1e1
  • RSS
  • Random
  • Archive
  • Ask me anything
  • Mobile

Effector Theme by Carlo Franco.

Powered by Tumblr