Shop More Submit  Join Login
×

Featured in Collections

Journals 'n' News by Phlum

Favorite Journal Posts by DulcetFancy

Journals by Penultimate-21


More from deviantART



Details

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

Stats

Views
5,539
Favourites
226 (who?)
Comments
89
×

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  Student 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
:iconbentez:
bentez Featured By Owner Aug 9, 2012  Student Digital Artist
Can we use this in custom boxes?
Reply
:iconnesmaty:
Nesmaty Featured By Owner Aug 17, 2012
I don't think so :D
Reply
:iconbentez:
bentez Featured By Owner Aug 21, 2012  Student Digital 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
Add a Comment: