Shop Mobile More Submit  Join Login

Border CSS Tips

Fri Mar 2, 2012, 5:23 AM
You'll find many border css styles all around the web .. I am not adding anything new here .. just collecting some of my favourite border styles and tips together .. Also I want our students in eCSSercise to check on this blog .. hope u'll find them useful :dummy:

:new: Wow .. thanx for the feedback .. with ur help I'll add more tips below .. keep an eye on them XD


What's a border?

Border is what surrounds your html/css object/item, let it be a text, an empty box, or an image .. etc


What makes up a border?

Border has four properties:

Color - Width - Style - Radius


Whether you choose for your border to be visible or not, bear in mind it's made up of four parts:

Top - Bottom - Right - Left


How to use that in CSS?

The border properties have different ways to write down their values, but I always use a fixed/limited way:

color: #------; --> border color
width: --px; --> border thickness
style: solid, dashed, dotted; --> border appearance
radius: --px; -->border corner

Thus you can consider your border to be one entity and give it one value for each property .. e.g:
border-width:3px;

Or consider the four parts and give each its own value .. e.g:
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;

An example for a short way to write it is:
border-width: 1px 2px 3xp 4xp;

This way top border will be 1px
This way right border will be 2px
This way bottom border will be 3px
This way left border will be 4px


Come on .. applied examples plz!!

The chit chat above was a quick overlook of what I think is important about borders .. From down below you'll see some live examples of how interesting a border can be .. the code will be written inside the border!


Colored border

  border: 4px solid;
  border-color: #F9BE6B #666666 #CC6633 #666666;


Dashed border

  border: 4px dashed #CC6633;


Border for right sided bars

Lorem ipsum dolor sit amet, Nesmaty consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
border-left:2px dotted #CC6633;


Round corner1

  border: 2px solid #CC6633;
  border-radius: 15px;


Round corner2

  border: none;
  border-radius: 15px 15px 15px 15px;


Round corner3

  border: 2px solid #CC6633;
  border-radius: 25px 0px 25px 0px;


Box shadow outside .. :new:

  border: none;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  box-shadow: 0px 2px 6px 2px #CC6600;
  -moz-box-shadow: 0px 2px 6px 2px #CC6600;
  -webkit-box-shadow: 0px 2px 6px 2px #CC6600;


Box shadow inside + outside .. pointed by GillianIvy :new:

   border: none;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
  -moz-box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
  -webkit-box-shadow: 0px 2px 6px 2px #CC6600, inset 0px 1px 3px 3px #ffffff;
}


Thumb frames .. requested by spring-sky :new:

Fairy Tale skin by NesmatyLily Supports Krissi by spring-skyBloo Mac glomp by spring-sky

  .shadow-holder {
  background: #CC9966;
  border: #996600 1px solid;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-box-shadow: 0px 1px 3px 1px #CC9966;
  box-shadow: 0px 1px 3px 1px #CC9966;
  -moz-box-shadow: 0px 1px 3px 1px #CC9966;
  margin: 6px;
  padding: 6px;
}

.shadow-holder:hover {
  background: #FFCC99;
}


Borders can give circles and triangles by neurotype :new:

.arrow {
  border-color: transparent black;
  border-style: solid;
  border-width: 20px 0px 20px 20px;
  height: 0px;
  width: 0px;
}

.circle {
  background: #FFCC99;
  border-radius: 60px;
  height: 50px;
  width: 50px;
}


That's it!!

More examples to come soon ^___^


Add a Comment:
 
:iconantonmoscowsky:
AntonMoscowsky Featured By Owner Oct 22, 2012  Hobbyist Digital Artist
very helpful thanks, but can I use background image for my borders?
Reply
:iconnesmaty:
Nesmaty Featured By Owner Oct 28, 2012
That can be done in other websites .. not applicable in DA though :)
Reply
:iconhyshinara:
Hyshinara Featured By Owner Aug 14, 2012   Digital Artist
Thank you for these posts :D
I used it to make this info-box-thingy: [link]

I was also wondering if there is a way to use there borders in a deviation's description?
(I'd like to use the exact same text / appearance as that journal post)
Reply
:iconnesmaty:
Nesmaty Featured By Owner Aug 17, 2012
I don't think it's an available feature in DA yet :)

Thanks :thanks:
Reply
:iconbente36:
bente36 Featured By Owner Aug 9, 2012   General Artist
Can we use this in custom boxes?
Reply
:iconnesmaty:
Nesmaty Featured By Owner Aug 17, 2012
I don't think so :D
Reply
:iconbente36:
bente36 Featured By Owner Aug 21, 2012   General Artist
oh I see. thanks!
Reply
:iconnaeran:
Naeran Featured By Owner Jun 21, 2012  Hobbyist General Artist
Interesting and useful! :)

Thanks for sharing. It may be helpful in the future. :clap:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Aug 17, 2012
Welcome ^^
Reply
:icondhik-a:
dhik-a Featured By Owner Apr 1, 2012  Student General Artist
You helped me to create this: [link] thank you! :glomp:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Apr 2, 2012
Thnx a lot .. you did great :la:
Reply
:iconel-l-en:
el-L-eN Featured By Owner Mar 13, 2012  Professional Interface Designer
This is great! Thank you! :glomp:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 28, 2012
Welcome :iconcocoloveplz:
Reply
:iconmaytel:
maytel Featured By Owner Mar 13, 2012
:thumb287507231:
Reply
:iconmaytel:
maytel Featured By Owner Mar 13, 2012
oops what the hell! hahaha copy+paste fail!
I meant:
Hi,
I featured you in my personal journal: [link]
Thanks!
Reply
:iconphlum:
Phlum Featured By Owner Mar 4, 2012  Student Digital Artist
Awesome. :dummy:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
I guess so .. :icondummydanceplz:
Reply
:icon3k-more:
3K-more Featured By Owner Mar 4, 2012
Good work :)
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
Thank u .. :thanks:
Reply
:icon3k-more:
3K-more Featured By Owner Mar 4, 2012
welcome (:
Reply
:iconaxe-cell:
Axe-Cell Featured By Owner Mar 4, 2012  Hobbyist General Artist
Must... survive... these harsh... lessons...

I've been looking around dA for some CSS tips lately, but so far I've been left in the dunce-cap corner that I couldn't even make sense as to which code is which. :confused: I think I can apply what I've picked up from here to my common knowledge. ^^
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
lol for the dunce-cap corner .. Have u considered looking into our group yet :eyes:

:iconecssercise:
Reply
:iconaxe-cell:
Axe-Cell Featured By Owner Mar 6, 2012  Hobbyist General Artist
I might :nod:, if I have the free time to do so. =p
(Once my school-term holidays arrive, I can have the time to study those tutorials!!)
Reply
:iconswarfega:
swarfega Featured By Owner Mar 4, 2012  Hobbyist Digital Artist
Does border-radius work across all browsers?
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
No .. unfortunately according to my limited knowledge it wont work in IE .. :shrug:

Also the shadow effect wont work :|
Reply
:iconneurotype:
neurotype Featured By Owner Mar 4, 2012
It does now...at least as far as I have tested :)
Reply
:iconpockaru:
Pockaru Featured By Owner Mar 4, 2012  Hobbyist Digital Artist
Wow, I've been trying to figure out some of these for years.
Thank you so much for this~
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
:lol: .. my pleasure .. glad it worked out for u .. :hug:
Reply
:iconlokiev:
Lokiev Featured By Owner Mar 3, 2012  Professional Interface Designer
Love that you've included CSS3. :D Nice, this is good reference.
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
I love CSS3 and wish we can use more of it here in DA .. thnx .. :iconilikeitplz:
Reply
:iconlokiev:
Lokiev Featured By Owner Mar 4, 2012  Professional Interface Designer
I'm just a little miffed that IE can't read it. D:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
Damn u IE :iconmadlynotimpressedplz:
Reply
:iconlokiev:
Lokiev Featured By Owner Mar 4, 2012  Professional Interface Designer
Bane of any coder's life. D:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
True .. :nod:
Reply
:iconlokiev:
Lokiev Featured By Owner Mar 4, 2012  Professional Interface Designer
:iconnodsplz:
Reply
:icontalty:
Talty Featured By Owner Mar 3, 2012   Artisan Crafter
This is fantastic! I just updated my price list and it looks so much more professional! This is so helpful, I love it, thank you so much!

I'm a bit of a credit-nazi, so before I publish the updated version I wanted to ask what kind of credit, recognition or thank you are you expecting us to give you if we use your tips.
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
lol for the I'm a bit of a credit-nazi well ..me too !

No need for credting me back .. I didn't make these up .. as I said it's collected from diffrent coding tutorials all around the web .. I just put 2+2 together to give u th 4 ;)

Thank u so much :) (Your clay works looks so cute btw >u<)
Reply
:icontalty:
Talty Featured By Owner Mar 4, 2012   Artisan Crafter
haha I'm glad I'm not the only one!

Ok well I still appreciate this a lot, it helped me and it's soooooo useful! here's what I did in case you want to see: [link]

And thanks, I'm glad you think my work is cute!! :D
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 5, 2012
Cool .. love the pastel colors :eager:
Reply
:icontalty:
Talty Featured By Owner Mar 5, 2012   Artisan Crafter
Thank you!! :meow:
Reply
:iconande-art:
ande-art Featured By Owner Mar 3, 2012  Hobbyist Digital Artist
Bookmarked. This should be pinned to the premiumMembers group. :peace:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
:iconforgivemeplz: .. Shokran keteer
Reply
:iconande-art:
ande-art Featured By Owner Mar 4, 2012  Hobbyist Digital Artist
np :)
Reply
:iconyukiko-berrie:
Yukiko-berrie Featured By Owner Mar 3, 2012  Student Traditional Artist
thank you so much!
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
U r welcome .. :heart:
Reply
:iconsparkling-dreamz:
sparkling-dreamz Featured By Owner Mar 3, 2012  Hobbyist Digital Artist
Thanks for the tips :iconiluplz:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
Definitely welcome .. :iconcocoloveplz:
Reply
:iconegil21:
Egil21 Featured By Owner Mar 3, 2012
Thank you for sharing :blowkiss:
Reply
:iconnesmaty:
Nesmaty Featured By Owner Mar 4, 2012
Welcome .. love to share .. :innocent:
Reply
:iconneurotype:
neurotype Featured By Owner Mar 3, 2012
Oh man so many awesome tips :la:

So if you set the border-radius to be higher than the width of the box, you can make circles and even triangles.... this is a little too advanced but it's kind of cool: [link]

for circles, something like...width:50px height:50px and then border-radius:60px would do it
Reply
Add a Comment:
 
×

Featured in Collections

CSS Tips by poserfan

Favorite Journal Posts by DulcetFancy


More from DeviantArt



Details

Submitted on
March 2, 2012
Submitted with
Sta.sh
Link
Thumb

Stats

Views
6,681 (1 today)
Favourites
234 (who?)
Comments
89
×