HOME | DD

Nesmaty — Border CSS Tips
Published: 2012-03-02 13:23:08 +0000 UTC; Views: 17189; 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

Nesmaty In reply to ??? [2012-10-28 17:56:38 +0000 UTC]

That can be done in other websites .. not applicable in DA though

👍: 0 ⏩: 0

JanTuts [2012-08-14 12:46:32 +0000 UTC]

Thank you for these posts
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)

👍: 0 ⏩: 1

Nesmaty In reply to JanTuts [2012-08-17 17:30:38 +0000 UTC]

I don't think it's an available feature in DA yet

Thanks

👍: 0 ⏩: 0

benteja [2012-08-09 12:16:13 +0000 UTC]

Can we use this in custom boxes?

👍: 0 ⏩: 1

Nesmaty In reply to benteja [2012-08-17 17:29:55 +0000 UTC]

I don't think so

👍: 0 ⏩: 1

benteja In reply to Nesmaty [2012-08-21 11:44:13 +0000 UTC]

oh I see. thanks!

👍: 0 ⏩: 0

Naeran [2012-06-21 18:56:43 +0000 UTC]

Interesting and useful!

Thanks for sharing. It may be helpful in the future.

👍: 0 ⏩: 1

Nesmaty In reply to Naeran [2012-08-17 17:29:34 +0000 UTC]

Welcome ^^

👍: 0 ⏩: 0

dhik-a [2012-04-02 01:10:45 +0000 UTC]

You helped me to create this: [link] thank you!

👍: 0 ⏩: 1

Nesmaty In reply to dhik-a [2012-04-02 10:50:40 +0000 UTC]

Thnx a lot .. you did great

👍: 0 ⏩: 0

el-L-eN [2012-03-13 23:13:34 +0000 UTC]

This is great! Thank you!

👍: 0 ⏩: 1

Nesmaty In reply to el-L-eN [2012-03-28 18:32:41 +0000 UTC]

Welcome

👍: 0 ⏩: 0

maytel [2012-03-13 13:31:53 +0000 UTC]

:thumb287507231:

👍: 0 ⏩: 1

maytel In reply to maytel [2012-03-13 13:33:05 +0000 UTC]

oops what the hell! hahaha copy+paste fail!
I meant:
Hi,
I featured you in my personal journal: [link]
Thanks!

👍: 0 ⏩: 0

Phlum [2012-03-04 13:33:09 +0000 UTC]

Awesome.

👍: 0 ⏩: 1

Nesmaty In reply to Phlum [2012-03-04 15:12:20 +0000 UTC]

I guess so ..

👍: 0 ⏩: 0

3K-more [2012-03-04 11:26:47 +0000 UTC]

Good work

👍: 0 ⏩: 1

Nesmaty In reply to 3K-more [2012-03-04 14:43:09 +0000 UTC]

Thank u ..

👍: 0 ⏩: 1

3K-more In reply to Nesmaty [2012-03-04 15:17:11 +0000 UTC]

welcome (:

👍: 0 ⏩: 0

Axe-Cell [2012-03-04 10:23:07 +0000 UTC]

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. I think I can apply what I've picked up from here to my common knowledge. ^^

👍: 0 ⏩: 1

Nesmaty In reply to Axe-Cell [2012-03-04 14:45:56 +0000 UTC]

lol for the dunce-cap corner .. Have u considered looking into our group yet

👍: 0 ⏩: 1

Axe-Cell In reply to Nesmaty [2012-03-06 11:18:56 +0000 UTC]

I might , if I have the free time to do so.
(Once my school-term holidays arrive, I can have the time to study those tutorials!!)

👍: 0 ⏩: 0

swarfega [2012-03-04 08:37:21 +0000 UTC]

Does border-radius work across all browsers?

👍: 0 ⏩: 2

Nesmaty In reply to swarfega [2012-03-04 14:42:07 +0000 UTC]

No .. unfortunately according to my limited knowledge it wont work in IE ..

Also the shadow effect wont work

👍: 0 ⏩: 0

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

It does now...at least as far as I have tested

👍: 0 ⏩: 0

Pockaru [2012-03-04 08:07:31 +0000 UTC]

Wow, I've been trying to figure out some of these for years.
Thank you so much for this~

👍: 0 ⏩: 1

Nesmaty In reply to Pockaru [2012-03-04 14:42:40 +0000 UTC]

.. my pleasure .. glad it worked out for u ..

👍: 0 ⏩: 0

Lokiev [2012-03-04 06:06:06 +0000 UTC]

Love that you've included CSS3. Nice, this is good reference.

👍: 0 ⏩: 1

Nesmaty In reply to Lokiev [2012-03-04 14:47:45 +0000 UTC]

I love CSS3 and wish we can use more of it here in DA .. thnx ..

👍: 0 ⏩: 1

Lokiev In reply to Nesmaty [2012-03-04 15:19:56 +0000 UTC]

I'm just a little miffed that IE can't read it. D:

👍: 0 ⏩: 1

Nesmaty In reply to Lokiev [2012-03-04 15:29:27 +0000 UTC]

Damn u IE

👍: 0 ⏩: 1

Lokiev In reply to Nesmaty [2012-03-04 15:35:18 +0000 UTC]

Bane of any coder's life. D:

👍: 0 ⏩: 1

Nesmaty In reply to Lokiev [2012-03-04 16:43:00 +0000 UTC]

True ..

👍: 0 ⏩: 1

Lokiev In reply to Nesmaty [2012-03-04 16:52:02 +0000 UTC]

👍: 0 ⏩: 0

Talty [2012-03-04 04:48:00 +0000 UTC]

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.

👍: 0 ⏩: 1

Nesmaty In reply to Talty [2012-03-04 14:52:29 +0000 UTC]

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

👍: 0 ⏩: 1

Talty In reply to Nesmaty [2012-03-05 04:20:48 +0000 UTC]

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

👍: 0 ⏩: 1

Nesmaty In reply to Talty [2012-03-05 17:07:20 +0000 UTC]

Cool .. love the pastel colors

👍: 0 ⏩: 1

Talty In reply to Nesmaty [2012-03-05 17:23:08 +0000 UTC]

Thank you!!

👍: 0 ⏩: 0

ande-art [2012-03-04 03:58:26 +0000 UTC]

Bookmarked. This should be pinned to the premiumMembers group.

👍: 0 ⏩: 1

Nesmaty In reply to ande-art [2012-03-04 14:57:19 +0000 UTC]

.. Shokran keteer

👍: 0 ⏩: 1

ande-art In reply to Nesmaty [2012-03-05 05:53:57 +0000 UTC]

np

👍: 0 ⏩: 0

Yukiko-berrie [2012-03-04 03:26:29 +0000 UTC]

thank you so much!

👍: 0 ⏩: 1

Nesmaty In reply to Yukiko-berrie [2012-03-04 15:00:53 +0000 UTC]

U r welcome ..

👍: 0 ⏩: 0

sparkling-dreamz [2012-03-04 00:32:13 +0000 UTC]

Thanks for the tips

👍: 0 ⏩: 1

Nesmaty In reply to sparkling-dreamz [2012-03-04 15:01:31 +0000 UTC]

Definitely welcome ..

👍: 0 ⏩: 0

Egil21 [2012-03-03 23:20:01 +0000 UTC]

Thank you for sharing

👍: 0 ⏩: 1

Nesmaty In reply to Egil21 [2012-03-04 15:02:13 +0000 UTC]

Welcome .. love to share ..

👍: 0 ⏩: 0

neurotype-on-discord [2012-03-03 20:33:50 +0000 UTC]

Oh man so many awesome tips

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

👍: 0 ⏩: 1

Nesmaty In reply to neurotype-on-discord [2012-03-03 22:47:52 +0000 UTC]

.. thnx .. I put it in the journal

👍: 0 ⏩: 1


| Next =>