invisible border not working correctly

Question

i am making a website but when i want to make a border transparent to "subtract" it from a div, it is not working. can anyone tell me whats going on and how i could fix this? also when i zoom in the borders grow but the rest doenst, can someone tell me a fix for that too? here's the code:

<!DOCTYPE html>
<html>
<head>
    <title> Homepagina </title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <meta charset="utf-8">

    <!--Dit laadt het Raleway lettertype: -->
    <link href='https://fonts.googleapis.com/css?family=Raleway:200,300' rel='stylesheet' type='text/css'>

    <!--Dit laadt jQuery: -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"> </script>
</head>




<body>

    <div class="topBar">
        hoi 
    </div>

    <div class="jumbotron">
        <div class="overMij">

        </div>

        <div class="hobbies">

        </div>

        <div class="muziek">

        </div>

        <div class="informatica">

        </div>
    </div>

</body>

html, body { 
    margin: 0;  
    width: 100%; 
    height: 100%;
    background-image: url(background.jpg)
}

.topBar {
    height: 10%;
    width: 100%;
    background-color: blue;

}

.jumbotron {
    height: 90%;
    width: 100%;
}

.overMij {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    background-color: green;
    background-size: 100%;
    width: 60%;
    height: 50%;
    float: left;
    border-radius: 50px;
    border: solid white 25px;
}

.hobbies {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    background-color: green;
    background-size: 100%;
    width: 40%;
    height: 50%;
    float: right;
    border-radius: 50px;
    border: solid white 25px;
}

.muziek {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    background-color: green;
    background-size: 100%;
    width: 40%;
    height: 50%;
    float: left;
    border-radius: 50px;
    border: solid white 25px;
}

.informatica {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    background-color: green;
    background-size: 100%;
    width: 60%;
    height: 50%;
    float: right;
    border-radius: 50px;
    border: solid white 25px;
}

@kfreeman04208 i want the background color to not be the whole height and width of the div, so i tried padding and margin but it was way difficult with 60 and 40% so i tried border which seems to work, but i wantr the border to be transparent and to show the background, if you get what i mean — Candy_In_Mah_Van, Oct 26 '15 at 15:04
@Candy_In_Mah_Van What is the purpose of borders? Do you want to add space between `divs`? — Alex, Oct 26 '15 at 15:17

score 1 · Answer 1 · answered Oct 26 '15 at 15:17

1

You can use background-clip for this:

* {
  box-sizing: border-box;
}

body {
  background: #bada55;
}

div {
  width: 250px;
  height: 250px;
  margin: 25px auto;
  border:2px solid grey;
  padding:10px;
  background: #f00;
  background-clip: content-box;
}

<div></div>

Background-clip @ MDN

Support @ CanIUse.com

answered Oct 26 '15 at 15:17

Paulie_D

107,962
13
142
161

Perhaps you could make a demo of the issue. – Paulie_D Oct 26 '15 at 15:30

score 0 · Answer 2 · 2015-10-26T15:51:10.723

0

Add this to your border property see if its what you want. I found a white.

border: 25px solid rgba(255,255,255, 1);

edited Oct 26 '15 at 15:51

answered Oct 26 '15 at 15:09

also doesnt work, it makes the border darker green instead of showing the background – Candy_In_Mah_Van Oct 26 '15 at 15:14

score 0 · Accepted Answer · answered Oct 26 '15 at 15:40

0

You can use margin instead of transparent border.

I optimize your css. You can check this jsfiddle

answered Oct 26 '15 at 15:40

Alex

8,461
6
37
49

score 0 · Answer 4 · answered Oct 26 '15 at 15:49

Margins is definitely something you need to do. Boarders are always a part of the divs. You shouldn't be using them to separate divs. Below is the updated CSS and Codepen for you:

http://codepen.io/anon/pen/PPRBMe

.overMij {  
    background-color: black;
    background-size: 100%;
    width: 58%;
    height: 48%;
    float: left;
    border-radius: 50px;
    margin: 1%
}

.hobbies {
    background-color: grey;
    background-size: 100%;
    width: 38%;
    height: 48%;
    float: right;
    border-radius: 50px;
    margin: 1%;
}

.muziek {
    background-color: purple;
    background-size: 100%;
    width: 38%;
    height: 38%;
    float: left;
    border-radius: 50px;
    margin: 1%;
}

.informatica {
    background-color: green;
    background-size: 100%;
    width: 58%;
    height: 38%;
   float: left;
    border-radius: 50px;
    margin: 1%;
}

invisible border not working correctly

4 Answers4