HOME | DD

Nesmaty — Border CSS Tips
Published: 2012-03-02 13:23:08 +0000 UTC; Views: 17634; Favourites: 232; Downloads: 0
Redirect to original
Description body div#devskin7388121 .gr-box { border-radius:6px 6px 6px 6px; -moz-border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px; border-radius:6px 6px 6px 6px; -moz-border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px; background:#ffffff url(https://fc07.deviantart.net/fs70/f/2012/062/d/7/asg_03_by_soulfight_a_devianty-d4rjsen.png) top right no-repeat; border:#845C24 1px solid; border-radius:6px 6px 6px 6px; -moz-border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px; color:#6E4217; margin-bottom:10px!important; overflow:hidden; } body div#devskin7388121 .gr-box { cursor:url(https://fc07.deviantart.net/fs70/f/2012/062/4/2/retjg_07_by_soulfight_a_devianty-d4rjsei.png), auto; } body div#devskin7388121 .gr-box a { color:#CC6633; cursor:url(https://fc07.deviantart.net/fs70/f/2012/062/4/2/retjg_07_by_soulfight_a_devianty-d4rjsei.png), pointer; text-decoration:none; } body div#devskin7388121 .gr-box a:hover { border-bottom:1px dotted; color:#6E4217; cursor:url(https://fc07.deviantart.net/fs70/f/2012/062/4/2/retjg_07_by_soulfight_a_devianty-d4rjsei.png), pointer; text-decoration:none; } body div#devskin7388121 .gr { background:transparent; border:0; } body div#devskin7388121 .gr1 { display:none; } body div#devskin7388121 .gr2 { display:none; } body div#devskin7388121 .gr3 { display:none; } body div#devskin7388121 .tri { display:none; } body div#devskin7388121 .gr-top img { display:none; } body div#devskin7388121 .tri { display:none; } body div#devskin7388121 .gr-top { background:transparent; border:none; height:0px; margin:0px; text-align:center; z-index:1; } body div#devskin7388121 h2 { color:#AA7541; cursor:url(https://fc07.deviantart.net/fs70/f/2012/062/4/2/retjg_07_by_soulfight_a_devianty-d4rjsei.png), pointer; font-family:'Playball', cursive; font-size:27px; left:20px; position:relative; top:150px; } body div#devskin7388121 h2 a { color:#AA7541!important; font-family:'Playball', cursive; } body div#devskin7388121 h2 a:hover { border:none!important; color:#CC6633!important; font-family:'Playball', cursive; } body div#devskin7388121 .gr-top span { color:#6E4217; font-size:9px; left:20px; position:relative; top:150px; } body div#devskin7388121 .gr-body { border-radius:6px 0px 0px 0px; -moz-border-radius:6px 0px 0px 0px; -webkit-border-radius:6px 0px 0px 0px; border-radius:6px 0px 0px 0px; -moz-border-radius:6px 0px 0px 0px; -webkit-border-radius:6px 0px 0px 0px; background:transparent url(https://fc03.deviantart.net/fs70/f/2012/062/1/4/retjg_03_by_soulfight_a_devianty-d4rjseh.png) top left no-repeat; border:none; border-radius:6px 0px 0px 0px; -moz-border-radius:6px 0px 0px 0px; -webkit-border-radius:6px 0px 0px 0px; margin:0px; padding:0px; } body div#devskin7388121 .gr-body .text { background:transparent; border:none; color:#6E4217; line-height:16px; margin:240px 40px 40px 40px; padding:20px; } body div#devskin7388121 .c { bottom:0px; font-family:'Playball', cursive; font-size:15px; left:15px; position:absolute; } body div#devskin7388121 .c a:hover { border:none!important; } body div#devskin7388121 .prevlink { display:none; } body div#devskin7388121 .hsep { display:none; } body div#devskin7388121 .list { display:none; } body div#devskin7388121 .Footer { bottom:5px; font-size:10px; position:absolute; right:5px; text-align:right; } body div#devskin7388121 .skin_attribution { display:none; } body div#devskin7388121 .h3 { border:none; color:#CC6600; display:block; font-family:'Playball', cursive; font-size:22px; margin:0px; margin-top:20px; padding:0px; } body div#devskin7388121 .box { background:#DADADA; border:1px #CC6633 solid; display:block; margin:10px 30px; overflow:auto; padding:20px; text-align:left; } body div#devskin7388121 .box-colored { background:#DADADA; border:4px solid; border-color:#F9BE6B #666666 #CC6633 #666666; display:block; margin:10px 30px; padding:20px; } body div#devskin7388121 .box-dashed { background:#DADADA; border:4px dashed #CC6633; display:block; margin:10px 30px; padding:20px; } body div#devskin7388121 .right { border-left:2px dotted #CC6633; float:right; margin-left:30px!important; padding-left:10px; width:150px; } body div#devskin7388121 .clear { clear:both; } body div#devskin7388121 .box-round1 { border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; background:#DADADA; border:2px solid #CC6633; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; display:block; margin:10px 30px; padding:20px; } body div#devskin7388121 .box-round2 { border-radius:15px 15px 15px 15px; -moz-border-radius:15px 15px 15px 15px; -webkit-border-radius:15px 15px 15px 15px; border-radius:15px 15px 15px 15px; -moz-border-radius:15px 15px 15px 15px; -webkit-border-radius:15px 15px 15px 15px; background:#DADADA; border:none; border-radius:15px 15px 15px 15px; -moz-border-radius:15px 15px 15px 15px; -webkit-border-radius:15px 15px 15px 15px; display:block; margin:10px 30px; padding:20px; } body div#devskin7388121 .box-round3 { border-radius:25px 0px 25px 0px; -moz-border-radius:25px 0px 25px 0px; -webkit-border-radius:25px 0px 25px 0px; border-radius:25px 0px 25px 0px; -moz-border-radius:25px 0px 25px 0px; -webkit-border-radius:25px 0px 25px 0px; background:#DADADA; border:2px solid #CC6633; border-radius:25px 0px 25px 0px; -moz-border-radius:25px 0px 25px 0px; -webkit-border-radius:25px 0px 25px 0px; display:block; margin:10px 30px; padding:20px; } body div#devskin7388121 .box-shades-out { 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; 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; background:transparent url(https://fc08.deviantart.net/fs70/f/2012/061/5/9/sa_03_by_soulfight_a_devianty-d4rhf1x.png) repeat; 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; display:block; margin:10px 30px; padding:20px; } body div#devskin7388121 .box-shades-in { 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; 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; background:transparent url(https://fc08.deviantart.net/fs70/f/2012/061/5/9/sa_03_by_soulfight_a_devianty-d4rhf1x.png) repeat; 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; display:block; margin:10px 30px; padding:20px; } body div#devskin7388121 .frame .shadow-holder { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:0px 1px 3px 1px #CC9966; -moz-box-shadow:0px 1px 3px 1px #CC9966; -webkit-box-shadow:0px 1px 3px 1px #CC9966; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:0px 1px 3px 1px #CC9966; -moz-box-shadow:0px 1px 3px 1px #CC9966; -webkit-box-shadow:0px 1px 3px 1px #CC9966; background:#CC9966; border:#996600 1px solid; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:0px 1px 3px 1px #CC9966; -moz-box-shadow:0px 1px 3px 1px #CC9966; -webkit-box-shadow:0px 1px 3px 1px #CC9966; margin:6px; padding:6px; } body div#devskin7388121 .frame .shadow-holder:hover { background:#FFCC99; } body div#devskin7388121 .circle { background:#CC9966; border-radius:60px; -moz-border-radius:60px; -webkit-border-radius:60px; height:50px; width:50px; } body div#devskin7388121 .arrow { border-bottom:60px solid transparent; border-left:60px solid #CC9966; border-top:60px solid transparent; height:0; width:0; }

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

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 ..


  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 gillianivyart


   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



  .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-on-discord


.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 ^___^



Skin CSS © Nesmaty

Related content

[ TEXT ]


Nesmaty - War has come

[ TEXT ]


Nesmaty - Our contest is finally out

[ TEXT ]


Nesmaty - Ideas

[ TEXT ]


Nesmaty - I'm happy!
Comments: 89

neurotype-on-discord In reply to ??? [2012-03-04 11:02:54 +0000 UTC]

Looks awesome

👍: 0 ⏩: 1

Nesmaty In reply to neurotype-on-discord [2012-03-04 15:01:45 +0000 UTC]

👍: 0 ⏩: 1

neurotype-on-discord In reply to Nesmaty [2012-03-09 03:30:01 +0000 UTC]

bunny!

👍: 0 ⏩: 1

Nesmaty In reply to neurotype-on-discord [2012-03-09 16:43:03 +0000 UTC]

Yeah .. bunnies are the best ..

👍: 0 ⏩: 0

FushigiInochi In reply to ??? [2012-03-03 20:13:10 +0000 UTC]

Thank you very much for the tips! Very useful.

👍: 0 ⏩: 1

Nesmaty In reply to FushigiInochi [2012-03-03 22:49:20 +0000 UTC]

Hope they be of some help to all of u my friends

👍: 0 ⏩: 0

Alosa [2012-03-03 16:30:32 +0000 UTC]

Usefully tips

👍: 0 ⏩: 1

Nesmaty In reply to Alosa [2012-03-03 22:48:45 +0000 UTC]

Thank u ..

👍: 0 ⏩: 0

spring-sky [2012-03-03 13:27:23 +0000 UTC]

Yay ..Thanks for the update

Just one question ,will the thumb frame change its size according to the thumbnail image size ??.

Like if I featured a small thumb (like an emote) will the frame get smaller too ?

👍: 0 ⏩: 1

Nesmaty In reply to spring-sky [2012-03-03 13:45:09 +0000 UTC]

Welcome .. Yes for emotes too .. check the skin again

👍: 0 ⏩: 2

spring-sky In reply to Nesmaty [2012-03-03 13:54:30 +0000 UTC]

By the way ,There's a wonderful hoover effect in ^krissi001 's journal [link] . And all the thumb frames are the same size .

do you know how to make it ?

Sorry ,I know that I had bothered you with my frequent questions .

👍: 0 ⏩: 1

Nesmaty In reply to spring-sky [2012-03-03 14:14:36 +0000 UTC]

Haha .. no the idea in that hover effect's that he/she uses two images for the thumb background with a fixed width instead of colors and border .. one image u see it normally .. the other when u hover over it ..

For the codes .. u'll have to ask him/her .. it's their own effect

👍: 0 ⏩: 1

spring-sky In reply to Nesmaty [2012-03-03 14:19:50 +0000 UTC]

Oh ..I get it . Thanks for the help .

👍: 0 ⏩: 0

spring-sky In reply to Nesmaty [2012-03-03 13:51:34 +0000 UTC]

Awwww .... so much for the feature

👍: 0 ⏩: 1

Nesmaty In reply to spring-sky [2012-03-03 13:54:16 +0000 UTC]

👍: 0 ⏩: 0

gillianivyart In reply to ??? [2012-03-03 02:31:36 +0000 UTC]

I love transparent borders. I add in a bit of box-shadow on the inset and outer, and having a transparent border gives it a neat framed effect. If you have a bg image, then it shows the image through. ;D

👍: 0 ⏩: 1

Nesmaty In reply to gillianivyart [2012-03-03 09:28:42 +0000 UTC]

Oh yeah cool .. I'll add that in the tips too

👍: 0 ⏩: 1

gillianivyart In reply to Nesmaty [2012-03-03 11:46:38 +0000 UTC]

Maybe I should do a snippet on box-shadow. I love playing with box-shadow. If that weren't extremely obvious! hahaha!

👍: 0 ⏩: 1

Nesmaty In reply to gillianivyart [2012-03-03 12:18:44 +0000 UTC]

Yes yes .. .. I wanna see

👍: 0 ⏩: 0

maytel [2012-03-03 00:26:37 +0000 UTC]

Thanks for sharing! Love those rounded borders

👍: 0 ⏩: 1

Nesmaty In reply to maytel [2012-03-03 10:27:41 +0000 UTC]

I love'm too .. and u r welcome

👍: 0 ⏩: 0

spring-sky In reply to ??? [2012-03-02 22:47:28 +0000 UTC]

I've always wondered how to do that .

Thanks a lot for the useful tips .

I don't want to bother you ,but can you make us another journal of how to put frames around the thumb images ??

👍: 0 ⏩: 1

Nesmaty In reply to spring-sky [2012-03-03 10:27:17 +0000 UTC]

Thank u my dear .. no worries at all .. check the same journal again

👍: 0 ⏩: 1

spring-sky In reply to Nesmaty [2012-03-03 13:37:55 +0000 UTC]

Yes!! Thank you very much

👍: 0 ⏩: 0

Erozja In reply to ??? [2012-03-02 19:52:52 +0000 UTC]

Cool and helpful idea!

👍: 0 ⏩: 1

Nesmaty In reply to Erozja [2012-03-03 10:26:39 +0000 UTC]

Glad u find'm helpful ..

👍: 0 ⏩: 1

Erozja In reply to Nesmaty [2012-03-03 17:26:53 +0000 UTC]

👍: 0 ⏩: 0

marioluevanos [2012-03-02 18:38:22 +0000 UTC]

Very good tips!

👍: 0 ⏩: 1

Nesmaty In reply to marioluevanos [2012-03-03 10:26:13 +0000 UTC]

Thank u ..

👍: 0 ⏩: 0

Tifa22 In reply to ??? [2012-03-02 18:03:25 +0000 UTC]

This is pretty cool, thanks for sharing!

👍: 0 ⏩: 1

Nesmaty In reply to Tifa22 [2012-03-03 10:25:54 +0000 UTC]

U R Wlecome

👍: 0 ⏩: 0

nikkittie In reply to ??? [2012-03-02 17:27:15 +0000 UTC]

Very useful!

👍: 0 ⏩: 1

Nesmaty In reply to nikkittie [2012-03-02 17:45:32 +0000 UTC]

Well I tried ..

👍: 0 ⏩: 0

Naay-Atsuara In reply to ??? [2012-03-02 17:22:35 +0000 UTC]

Aw, this will help me a lot!
Thank you =3

👍: 0 ⏩: 1

Nesmaty In reply to Naay-Atsuara [2012-03-02 17:45:45 +0000 UTC]

Welcome ..

👍: 0 ⏩: 0

HamidQureshi In reply to ??? [2012-03-02 13:38:19 +0000 UTC]

Yes very helpful i used it in my previous journal skin

👍: 0 ⏩: 1

Nesmaty In reply to HamidQureshi [2012-03-02 14:52:05 +0000 UTC]

Thank u .. I hope CSS newbies will find'm useful too

👍: 0 ⏩: 1

HamidQureshi In reply to Nesmaty [2012-03-02 16:20:05 +0000 UTC]

yes

👍: 0 ⏩: 0